Placement automatique

5.1 Propriété grid-auto-rows

CSS Grid Layout propose d'excellents outils pour placer automatiquement les éléments dans une grille. Les propriétés grid-auto-rows, grid-auto-columns et grid-auto-flow aident à gérer le comportement des éléments qui ne sont pas explicitement placés dans la grille. Examinons ces propriétés en détail.

La propriété grid-auto-rows définit la hauteur des lignes qui sont ajoutées automatiquement lorsque les éléments dépassent les lignes explicitement définies.

Syntaxe :

    
      .grid-container {
        grid-auto-rows: value;
      }
    
  

Où :

• value: la hauteur des lignes ajoutées automatiquement. Peut être spécifiée dans différentes unités de mesure (px, %, fr, auto, etc.)

Exemple 1 : Hauteur de ligne fixe

Dans cet exemple, toutes les lignes ajoutées automatiquement auront une hauteur fixe de 100px :

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Trois colonnes de largeur égale */
        grid-auto-rows: 100px; /* Lignes ajoutées automatiquement avec une hauteur de 100px */
      }
    
  

Exemple 2 : Hauteur de ligne flexible

Dans cet exemple, les lignes ajoutées automatiquement auront une hauteur minimale de 100px, mais peuvent s'allonger si nécessaire :

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: minmax(100px, auto); /* Hauteur minimale de 100px, peut s'allonger automatiquement */
      }
    
  

5.2 Propriété grid-auto-columns

La propriété grid-auto-columns définit la largeur des colonnes qui sont ajoutées automatiquement lorsque les éléments dépassent les colonnes explicitement définies.

Syntaxe :

    
      .grid-container {
        grid-auto-columns: value;
      }
    
  

Où :

• value: la largeur des colonnes ajoutées automatiquement. Peut être spécifiée dans différentes unités de mesure (px, %, fr, auto, etc.)

Exemple 1 : Largeur de colonne fixe

Dans cet exemple, toutes les colonnes ajoutées automatiquement auront une largeur fixe de 100px :

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 100px); /* Trois lignes de hauteur fixe */
        grid-auto-columns: 100px; /* Colonnes ajoutées automatiquement avec une largeur de 100px */
      }
    
  

Exemple 2 : Largeur de colonne flexible

Dans cet exemple, les colonnes ajoutées automatiquement auront une largeur minimale de 100px, mais peuvent s'allonger à une partie de l'espace disponible :

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 100px);
        grid-auto-columns: minmax(100px, 1fr); /* Largeur minimale de 100px, peut s'allonger à une partie de l'espace disponible */
      }
    
  

5.3 Propriété grid-auto-flow

La propriété grid-auto-flow définit comment placer les éléments automatiquement dans la grille qui ne sont pas explicitement définis avec les propriétés grid-row et grid-column.

Syntaxe :

    
      .grid-container {
        grid-auto-flow: value;
      }
    
  

Où :

value: valeur définissant l'ordre de placement des éléments. Valeurs possibles :

• row (par défaut) : les éléments sont placés par lignes
• column : les éléments sont placés par colonnes
• dense : les éléments sont placés de manière dense, sans cellules vides (utilisé avec row ou column)

Exemple 1 : Placement par lignes

Dans cet exemple, les éléments seront placés par lignes, remplissant les lignes l'une après l'autre :

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-flow: row; /* Les éléments sont placés par lignes */
      }
    
  

Exemple 2 : Placement par colonnes

Dans cet exemple, les éléments seront placés par colonnes, remplissant les colonnes l'une après l'autre :

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-flow: column; /* Les éléments sont placés par colonnes */
      }
    
  

Exemple 3 : Remplissage dense

Dans cet exemple, les éléments seront placés par lignes avec un remplissage dense, minimisant ainsi le nombre de cellules vides :

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-flow: row dense; /* Les éléments sont placés par lignes avec un remplissage dense */
      }
    
  

5.4 Exemple de mise en œuvre complète

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Trois colonnes de largeur égale */
        grid-auto-rows: 100px; /* Lignes ajoutées automatiquement avec une hauteur de 100px */
        grid-auto-flow: row dense; /* Les éléments sont placés par lignes avec un remplissage dense */
        gap: 10px;
      }

      .grid-item {
        background-color: #3498db;
        color: white;
        padding: 20px;
        text-align: center;
        border: 1px solid #fff;
      }
    
  

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Exemple de placement automatique des éléments en CSS Grid</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="grid-item">Élément 1</div>
            <div class="grid-item">Élément 2</div>
            <div class="grid-item">Élément 3</div>
            <div class="grid-item">Élément 4</div>
            <div class="grid-item">Élément 5</div>
            <div class="grid-item">Élément 6</div>
          </div>
        </body>
      </html>
    
  

Explication du code :

• .grid-container: crée un conteneur Grid avec trois colonnes de largeur égale et des lignes automatiques de hauteur 100px. Les éléments sont placés par lignes avec un remplissage dense
• .grid-item: définit les styles de base pour les éléments de la grille, comme la couleur de fond, la couleur du texte, les marges, l'alignement du texte et la bordure

1

Опрос

Bases du CSS Grid,  27 уровень,  4 лекция

недоступен

Bases du CSS Grid

Bases du CSS Grid

Открыть