Propriétés de mise en page multi-colonnes CSS : nombre de colonnes et espacement de colonnes

Propriétés de mise en page multi-colonnes CSS : nombre de colonnes et espacement de colonnes, des exemples de code spécifiques sont requis

Dans le développement front-end, la mise en œuvre d'une mise en page multi-colonnes est une exigence très courante. En CSS, il existe deux propriétés qui peuvent nous aider à implémenter facilement une disposition multi-colonnes : le nombre de colonnes et l'espacement des colonnes.

1. attributcolumn-count

l'attributcolumn-count est utilisé pour spécifier en combien de colonnes le contenu d'un élément est divisé pour l'affichage. Il accepte une valeur entière positive indiquant le nombre de colonnes en lesquelles diviser le contenu. Il convient de noter que lorsque l'attribut column-count est défini, le navigateur nous aidera automatiquement à calculer et à disposer le nombre de colonnes.

Ce qui suit est un exemple :

Code HTML :

<div class="columns">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Morbi sit amet urna leo. Suspendisse potenti.</p>
  <p>Nunc dapibus vitae libero a tristique. Donec vitae commodo sem, eu tristique erat.</p>
  <p>Fusce tristique lorem sed ipsum consectetur, nec laoreet dui euismod.</p>
  <p>Maecenas eget sem id ex feugiat placerat. Sed nec enim placerat, tristique diam in, sollicitudin sapien.</p>
</div>

Code CSS :

.columns {
  column-count: 3;
}

Le code ci-dessus divisera le texte du paragraphe enveloppé dans l'élément

<div class="columns">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Morbi sit amet urna leo. Suspendisse potenti.</p>
  <p>Nunc dapibus vitae libero a tristique. Donec vitae commodo sem, eu tristique erat.</p>
  <p>Fusce tristique lorem sed ipsum consectetur, nec laoreet dui euismod.</p>
  <p>Maecenas eget sem id ex feugiat placerat. Sed nec enim placerat, tristique diam in, sollicitudin sapien.</p>
</div>

.columns {
  column-count: 3;
  column-gap: 20px;
}