Grid (grille)

Grid, qu'est-ce que c'est ?

Avant de commencer, petite explication.

Comme les tableaux, grid (ou grille) permet d'aligner des éléments sous forme de colonnes et de lignes. À la différence des tableaux, grid n'a pas de structure de contenu. Ainsi, on peut créer de nombreuses mises en page qui n'auraient pas été possibles avec les tableaux. 

L'avantage, c'est qu'il est beaucoup plus facile d'intervertir, ajouter ou supprimer des cases qu'avec un tableau.

1- Partie HTML, à coller dans un code source (<>)

<div class="grid">
<div class="item">
<p>Case 1</p>
</div>
<div class="item">
<p>Case 2</p>
</div>
<div class="item">
<p>Case 3</p>
</div>
<div class="item">
<p>Case 4</p>
</div>
<div class="item">
<p>Case 5</p>
</div>
<div class="item">
<p>Case 6</p>
</div>

Ici, vous avez le choix de nommer vos case, en rose dans le code. Si vous avez prévu de donner la même apparence à chaque case, donnez-leur à tout le même nom. Exemple dans mon cas : item. Sinon, donnez un nom différent pour chaque case. Ici, les chiffre en anglais. Note : dans ce cernier cas, lorsque vous ajouterez des cases, vous devrez penser à changer les noms :

<div class="grid">
<div class="one">
<p>Case 1</p>
</div>
<div class="two">
<p>Case 2</p>
</div>
<div class="three">
<p>Case 3</p>
</div>

2- Partie CSS :

.grid {       
   display: grid;       
   grid-template-columns: repeat(3, 1fr);       
   grid-gap: 20px;       
   grid-auto-rows: minmax(100px, auto); 
} 

Détaillons un peu le CSS :

display: grid → Comme on est sur un grid, ça me parait évident.
grid-template-columns → colonnes en verticales. Ici, 3 colonnes. Vous pouvez changer à votre guise.
grid-gap → espace entre les colonnes (columns) et les lignes (row). Ici, espace de 20px.
grid-auto-rows → lignes à l'horizontal. minmax(100px, auto) → Ici, toutes vos cases feront 100px de haut quoi qu'il arrive. Toutefois, si le contenu de celui-ci se révèle être plus grand, il s'agustera automatiquement.

Déjà avec tout ça, on se retrouve avec une grille simple :

3- Personnaliser les cases :

Personnalisons un peu nos cases.

Là, rien de plus simple, c'est comme pour n'importe quel élément à modifier sur votre blog. Couleur, background, etc.

.item { /*nom de la classe-case*/
    padding: 10px;
    color: #111;
    background: #FFCD9A;
}

Si vous avez donné un nom différent à vos case, cela vous permet de les personnaliser individuellement :

.grid {       
   display: grid;       
   grid-template-columns: repeat(3, 1fr);       
   grid-gap: 20px;       
   grid-auto-rows: minmax(100px, auto);
}

.item1 { /*nom de la classe-case*/
    padding: 10px;
    color: #111;
    background: #FFCC99;
}

.item2 { /*nom de la classe-case*/
    padding: 10px;
    color: #111;
    border-radius: 30px;
    background: pink;
}

.item3 {text-align: center;
        border-radius: 30% / 50%;
     background: white;
    color: red; }

On est d'accord, c'est dégueulasse. C'est juste pour vous montrer ^^

4- Autres formes de grilles

Comme le montre l'image ci-dessus, au lieu d'avoir une grille avec des cases de tailles identiques, vous avez la possibilité de varier.

Pour notre premier exemple, admettons que je veuille que ma première case soit plus grande.

Pour que la case n°1 soit plus grande, il suffit de lui faire prendre la place de la case voisine (2). Pour ce faire, faite là aller jusqu'à la case 3. → grid-column : 1 / 3;

.one {
grid-column : 1 / 3;
grid-row: 1 ;
padding: 10px;
color: #111;
background: linear-gradient(to bottom left, #FF99CC 30%, #FFCC99 100%);
}

Ce qui donne :

Pour qu'elle soit encore plus grande et prenne toute la largeur de la ligne, il faut dépasser la colonne trois.

→ grid-column : 1 / 4;

Même chose pour prendre en hauteur. Sauf qu'au lieu d'utiliser grid-column (colonne), on utilise grid-row (ligne).

Là, on est descendu jusqu'à la ligne 3 pour que la case 1 soit sur deux lignes. 

.one { /* nom de la case 1*/
grid-row: 1 / 3; /* colonne 1 à 3*/
padding: 10px;
color: #111;
background: linear-gradient(to bottom left, #FF99CC 30%, #FFCC99 100%);
}

.one {
grid-column : 1 / 3; /* colonne 1 à 3*/
grid-row: 1 / 3;  /* ligne 1 à 3*/
padding: 10px;
color: #111;
background: linear-gradient(to bottom left, #FF99CC 30%, #FFCC99 100%);
}

5- Bonus, deux parties dans une même case.

Pour ma part, je trouve que la marge interne là où il y a l'image dérangeante. Je préfère quand l'image fait toute la largeur de la case (comme sur ma page d'accueil). Pour ceux faire, il faut diviser la classe en deux. Une partie image et une partie texte. Ainsi, dans le CSS, on pourra personnaliser les deux parties séparément.

Ce qui donne :

HTML :

<div class="grid">
<div class="item">
<div class="item-img">
<p>Image case 1</p>
</div>
<div class="item-text">
<p>Texte case 1</p>
</div>
</div>
<div class="item">
<div class="item-img">
<p>Image case 2</p>
</div>
<div class="item-text">
<p>Texte case 2</p>
</div>
</div>
<div class="item">
<div class="item-img">
<p>Image case 3</p>
</div>
<div class="item-text">
<p>Texte case 3</p>
</div>
</div>
<div class="item">
<div class="item-img">
<p>Image case 4</p>
</div>
<div class="item-text">
<p>Texte case 4</p>
</div>
</div>
<div class="item">
<div class="item-img">
<p>Image case 5</p>
</div>
<div class="item-text">
<p>Texte case 5</p>
</div>
</div>
<div class="item">
<div class="item-img">
<p>Image case 6</p>
</div>
<div class="item-text">
<p>Texte case 6</p>
</div>
</div>
</div>

 

CSS :

.grid {  
   display: grid;       
   grid-template-columns: repeat(3, 1fr);       
   grid-gap: 16px;       
   grid-auto-rows: minmax(100px, auto);
}

.item {border: 1px solid #999;}

.item-img {
    width: auto;
    background: #111;
    height: 150px;
    padding: 0px;
}

.item-text {
    color: #efefef;
    background: #111;
    padding: 10px;
}

Ce qui donne :

Voilà, je pense avoir fait le tour. Dans ce petit tuto, j'ai essayé de faire au plus simple.