Sujets CSS

Disposition multi-colonnes CSS

16/03/2023

Pour créer des colonnes dans une page HTML, vous pouvez diviser la page en colonnes à l’aide de la propriété CSS column-count.

Utilisation du nombre de colonnes avec des balises de liste

<style>
  #elements-list {
    column-count: 4; 
    padding-left: 0;
  }
</style>

<ul id="elements-list">
    <li>1 Hydrogen</li> 
    <li>2 Helium/li> 
    <li>3 Lithium</li> 
    <li>4 Beryllium</li> 
    <li>5 Boron</li> 
    <li>6 Carbon</li> 
    <li>7 Nitrogen</li> 
    <li>8 Oxygen</li> 
    <li>9 Fluorine</li> 
    <li>10 Neon</li>
    <li>11 Sodium</li>
</ul>

Liste divisée en colonnes:

1 Hydrogen
2 Helium
3 Lithium
4 Beryllium
5 Boron
6 Carbon
7 Nitrogen
8 Oxygen
9 Fluorine
10 Neon
11 Sodium

Utilisation du nombre de colonnes dans les paragraphes

<style>
   .p-columns {
      column-count: 3;
   }
   p:first-child {
      margin: 0;
   }
</style>

<div class="p-columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Paragraphes divisés en colonnes

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Propriétés CSS qui fonctionnent avec le nombre de colonnes

Les propriétés CSS suivantes sont utilisées avec la propriété column-count, elles ne peuvent pas être utilisées seules.

column-rule: Spécifie les limites entre les colonnes.
column-gap: Spécifie l’espace laissé entre les colonnes.
column-width: Spécifie la largeur des colonnes.

column-rule

<style>
   .p-columns {
      column-count: 3;
      column-rule: solid;
   }
   p:first-child {
      margin: 0;
   }
</style>

<div class="p-columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Paragraphes divisés en colonnes avec column-rule:

colonne-rule sous propriétés CSS

column-rule-color: Spécifie la couleur du séparateur.
column-rule-style: Spécifie le style du séparateur.
column-rule-width: Spécifie la largeur du séparateur.
column-rule: dashed
column-rule: dotted
column-rule: double
column-rule: groove
column-rule: hidden
column-rule: medium
column-rule: ridge
column-rule: solid

En spécifiant uniquement la propriété column-rule, les valeurs column-rule-color, colum-rule-style et column-rule-width peuvent être affectées avec un seul morceau de code.

CSS Column Rule

column-gap

<style>
   .p-columns {
      column-count: 3;
      column-rule: solid;
      column-gap: 4rem;
   }
   p:first-child {
      margin: 0;
   }
</style>

<div class="p-columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Les paragraphes sont divisés en colonnes à l’aide de column-rule et de column-gap :

column-width

Avec la propriété CSS column-width, la largeur de chaque colonne est spécifiée, si la largeur est trop importante, le nombre de colonnes peut changer en fonction de la zone de la fenêtre. Par exemple, column-count: 3; et column-width: 250px; Si spécifié, 3 colonnes peuvent apparaître dans une zone de 1000 pixels de large. Cependant, si un élément avec les mêmes propriétés CSS est réduit à une zone de 700 pixels de large, le nombre de colonnes est réduit à 2.

Sujets CSS

Éléments CSS

Disposition multi-colonnes CSS

Utilisation du nombre de colonnes avec des balises de liste

Utilisation du nombre de colonnes dans les paragraphes

Propriétés CSS qui fonctionnent avec le nombre de colonnes

column-rule

colonne-rule sous propriétés CSS

column-gap

column-width

Disposition multi-colonnes CSS

Commentaires CSS

CSS Cursor

Owl Carousel & Responsive Slider

Hiérarchie CSS

CSS Media Query & Conception réactive

Quels Sont Les Types de Structures CSS