Grid

Le HTML de base est composé d'un conteneur div qui contient 10 items div.

1
<div class="container-example">
2
    <div class="item-example">1</div>
3
    <div class="item-example">2</div>
4
    <div class="item-example">3</div>
5
    <div class="item-example">4</div>
6
    <div class="item-example">5</div>
7
    <div class="item-example">6</div>
8
    <div class="item-example">7</div>
9
    <div class="item-example">8</div>
10
    <div class="item-example">9</div>
11
    <div class="item-example">10</div>
12
</div>
1
/* CSS de BASE (pour tous les exemples) */
2
    .container-example {
3
        border: 2px solid #333;
4
        /* Contour pour visualiser le conteneur */
5
        padding: 10px;
6
        background-color: #f0f0f0;
7
    }
8
9
    .item-example {
10
        background-color: #6495ed;
11
        /* Couleur des éléments */
12
        color: white;
13
        padding: 15px;
14
        border: 1px solid #333;
15
        text-align: center;
16
        font-size: 1.2em;
17
    }

    
1

    
2

    
3

    
4

    
5

    
6

    
7

    
8

    
9

    
10





Grid
Méthodedisplay : grid
La propriété transforme le conteneur en une grille. Par défaut, les éléments s'affichent toujours comme des blocs ou en ligne.

      See the Pen 
  grid-2-grid by Vincent-Vanneste (@vincent-vanneste)
  on CodePen.
      



grid-2-grid
Méthodegrid-template-columns
La propriété structure la grille en indiquant le nombre et la taille de ses colonnes.

      See the Pen 
  grid-3-grid-template-columns by Vincent-Vanneste (@vincent-vanneste)
  on CodePen.
      



grid-3-grid-template-columns
Méthodegap
Ajoute de l'espace entre les cellules de la grille, à la fois pour les lignes et les colonnes.

      See the Pen 
  grid-3-grid-template-columns by Vincent-Vanneste (@vincent-vanneste)
  on CodePen.
      



grid-4-gap
Méthodegrid-template-rows
Par défaut, la grille ajuste automatiquement ses lignes au contenu. mais, Il est possible de définir leur hauteur manuellement.

      See the Pen 
  grid-5-grid-template-rows by Vincent-Vanneste (@vincent-vanneste)
  on CodePen.
      



grid-5-grid-template-rows
Méthodegrid-column, grid-row
Ces propriétés s'appliquent aux éléments enfants pour qu'ils s'étendent sur plusieurs lignes ou colonnes.

      See the Pen 
  grid-6-grid-column_row by Vincent-Vanneste (@vincent-vanneste)
  on CodePen.
      



grid-6-grid-column_row
Méthodejustify-content, align-items
Ces propriétés, appliquées au conteneur, gèrent l'alignement des éléments de la grille lorsque l'espace total est supérieur à la somme des tailles de colonnes/lignes.

      See the Pen 
  grid-7-justify-content_align-items by Vincent-Vanneste (@vincent-vanneste)
  on CodePen.
      



grid-7-justify-content_align-items
Méthoderepeat(), minmax(), auto-fit
Permettent de créer des grilles qui s'adaptent automatiquement à la taille de l'écran, sans avoir besoin de media queries pour les colonnes.
  • repeat(autofit, minmax(min, max)) : Permet de répéter une définition de colonne/ligne.
  • auto-fit : Crée autant de colonnes que possible sans faire déborder le contenu.
  • minmax(min, max) : taille min et taille max.

      See the Pen 
  grid-8-repeat_minmax_auto-fit by Vincent-Vanneste (@vincent-vanneste)
  on CodePen.
      



grid-8-repeat_minmax_auto-fit