Table des matières

2020-01-12: Création

Mémo CSS Grid

Les CSS Grid sont apparues en 2017 et permet le positionnement des éléments en X, Y.

Création d'une grille

Coté HTML: 

<div class="container">
    <div class="items">1</div>
    <div class="items">2</div>
    <div class="items">3</div>
    <div class="items">4</div>
    <div class="items">5</div>
    <div class="items">6</div>
</div>

Coté CSS: 

.container {
    background-color: #eee;
    width: 1000;
    margin: 30px auto;
 
    display: grid;
    grid-template-rows: 150px 150px;
    grid-template-columns: 150px 150px 150px;
    grid-row-gap: 30px;
    grid-column-gap: 30px;
    grid-gap: 30px;  //raccourcie row/column
}
.items {
    padding: 20px;
    font-size: 30px;
    font-family: sans-serif;
}
.item1 {
    background-color: pink;
}
.item2 {
    background-color: teal;
}
.item3 {
    background-color: yellowgreeb;
}
.item4 {
    background-color: crimson;
}
.item5 {
    background-color: goldenrod;
}
.item6 {
    background-color: indianred;
}

Rendu dans Firefox

Repeat et Fractionnal Unit

Repeat

.container {
    [...]    
    display: grid;
    grid-template-rows: repeat(2, 150px);
    grid-template-columns: repeat(2, 150px) 400px;
    grid-gap: 30px;
}

Fractionnal Unit

.container {
    [...]    
    display: grid;
    grid-template-rows: repeat(2, 150px);
    grid-template-columns: repeat(2, 150px) 1fr;
    grid-gap: 30px;
}

.container {
    [...]    
    display: grid;
    grid-template-rows: repeat(2, 150px);
    grid-template-columns: 1fr 6fr 1fr;
    grid-gap: 30px;
}

Placement avec Grid-Row et Grid-Col

Permet de déplacer un élément dans la grille : 

.item1 {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
 
    grid-row: 2 / 3;        //raccourci
    grid-column: 2 / 3;
 
   grid-area: 2 / 2 / 3 / 3;  //raccourci pas facilement compréhensible
 
    background-color: pink;
}

Placement sur plusieurs cellules

Permet d'étirer un élément dans la grille (avec ou sans empilement): 

.item1 {
    grid-row: 1 / 2;
    grid-column: 1 / 4;
    //ou pour dire la dernière position: -1
    grid-column: 1 / -1;
    //ou pour dire 3 cellule de large: span 3
    grid-column: 1 / span 3;
    background-color: pink;
}
.item2 {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    background-color: teal;
}

La cellule 1 pourrait être une bannière et la cellule 2 un titre. Modification de la taille en ligne et en colonnes : 

.item1 {
    grid-row: 1 / 2;
    grid-column: 1 / span 2;
    background-color: pink;
}
.item2 {
    grid-row: 1 / 3;
    grid-column: 3 / 4;
    background-color: teal;
}

Nommer Colonnes et rangés

.container {
    [...]    
    display: grid;
    grid-template-rows: [header-start]150px[header-end contenu-start] 150px [contenu-end];
    grid-template-columns: repeat(3, [col-start]150px[col-end]);
    grid-gap: 30px;
}

Utilisation des index de repeat : 

.item4 {
    grid-column: col-start 3 / col-end 3;
    background-color: crimson;
}

Nommer une "area"

Nomage des lignes complètes : 

.container {
    [...]    
    display: grid;
    grid-template-rows: repeat(2, 150px);
    grid-template-columns: repeat(3, 150px);
 
    grid-template-areas: "head head head"
                      "foot foot foot";
 
    grid-gap: 30px;
}

Utilisation : 

.item1 {
    grid-area: head;
    background-color: pink;
}

Nomage des lignes incomplètes : Il faut remplacer le nom par un point 

.container {
    [...]    
    display: grid;
    grid-template-rows: repeat(2, 150px);
    grid-template-columns: repeat(3, 150px);
 
    grid-template-areas: "head head ."
                      "foot foot foot";
 
    grid-gap: 30px;
}

Utilisation : (même code) 

.item1 {
    grid-area: head;
    background-color: pink;
}

Grille explicite et grille implicite

  • Une grille explicite est celle que l'on a paramétré.
  • Une grille implicite est celle qui est créé automatiquement par CSS Grid.
  • Il est possible de donner des instructions à l'une et à l'autre.

Exemple de code: 

.container {
    background-color: #eee;
    width: 1000;
    margin: 30px auto;
 
    display: grid;
    //une seule ligne paramétrée explicitement
    grid-template-rows: repeat(1, 150px); // il y a '1' dans le repeat
    grid-template-columns: repeat(3, 150px);
 
    grid-auto-flow: column;
    grid-auto-columns: 400px;
    //grid-auto-rows: 200px;  //hauteur de 200px (pas dans le screen)
 
    grid-gap: 30px;
}

Aligner et centrer les cellules

Ici on gère le centrage du contenu des cellules.

Pour le container

Les variantes de align-items sur axe Y:

  • align-items: stretch: (par défaut) étiré dans la cellule.
  • align-items: center: au centre de la cellule
  • align-items: start: en haut de la cellule
  • align-items: end: en bas de la cellule

Les variantes de justify-items sur axe X:

  • justify-items: stretch: (par défaut) étiré dans la celulle.
  • justify-items: center: au centre de la cellule
  • justify-items: start: à gauche de la cellule
  • justify-items: end: à droite de la cellule
.container {
    background-color: #eee;
    width: 1000;
    margin: 30px auto;
 
    align-items: center;  
    justify-items: center;  
 
    display: grid;
    grid-template-rows: repeat(2, 150px);
    grid-template-columns: repeat(3, 150px);
    grid-gap: 30px;
}

Pour un élément

Il faut utiliser align-self et justify-self: Exemple de code : 

.item2 {
    justify-self: end;
    align-self: end;
    background-color: teal;
}

Aligner et centrer sa grille

Il s'agit de positionner le container lui-même dans la page.
Code de base : 

.container {
    background-color: #eee;
    height: 1000px;
    width: 1000;
    margin: 30px auto;
    display: grid;
    grid-template-rows: 150px 150px;
    grid-template-columns: 150px 150px 150px;
    grid-row-gap: 30px;
    grid-column-gap: 30px;
    grid-gap: 30px;  //raccourcie row/column
}

Variantes de justify-content: 

    [...]
    justify-content: center;
    [...]

    [...]
    justify-content: space-between;
    [...]

    [...]
    justify-content: space-around;
    [...]

    [...]
    justify-content: space-evenly;
    [...]

    [...]
    justify-content: end;
    [...]

    [...]
    justify-content: start;
    [...]

Variantes de align-content: 

    [...]
    align-content: center;
    [...]

Au même titre que justify-content on a les variantes : 

    [...]
    align-content: space-between;
    [...]
    [...]
    align-content: space-around;
    [...]
    [...]
    align-content: space-evenly;
    [...]
    [...]
    align-content: end;
    [...]
    [...]
    align-content: start;
    [...]

Max-content et Min-content

Il s'agit de gérer les largeurs du cellule en fonction du texte qui est dedans. Code de base : Coté HTML: 

<div class="container">
    <div class="items">Un simple paragraphe</div>
    <div class="items">2</div>
    <div class="items">3</div>
    <div class="items">4</div>
    <div class="items">5</div>
    <div class="items">6</div>
</div>

Coté CSS: 

.container {
    background-color: #eee;
    width: 1000;
    margin: 30px auto;
    display: grid;
    grid-template-rows: repeat(2, 150px);
    grid-template-columns: repeat(3, 150px);
}

Le rendu montre l'affichage de texte dans la cellule 1:

Longueur totale du texte

Voici le code pour l'adaptation de la cellule à la longueur totale du texte: 

.container {
    [...]
    grid-template-rows: repeat(2, 150px);
    grid-template-columns: max-content 1fr 1fr;  //ici max-content
}

Mot le plus grand

Exemple de code tenant compte du mot le plus grand: 

.container {
    [...]
    grid-template-rows: repeat(2, 150px);
    grid-template-columns: max-content 1fr min-content;  //ici min-content
}

Code pour adapter les rangers: 

.container {
    [...]
    grid-template-rows: repeat(2, min-content);  //ici min-content
    grid-template-columns: max-content 1fr min-content;
}

Hauteur ligne fixe ou dépendante du texte

On impose une hauteur de ligne de 150px. Si le texte est plus haut, c'est lui qui modifie la hauteur de ligne : 

.container {
    [...]
    grid-template-rows: repeat(2, min-max(150px, min-content));  //ici min-max
    grid-template-columns: max-content 1fr min-content;
}

Largeur fixe et resizable en fonction de la résolution

  • La colonne 1 à un mini de 200px et un maxi de 700px en fonction de la résolution.
  • Les 2 colonnes suivantes sont resizable.

Code de base : Coté HTML: 

<div class="container">
    <div class="items">1</div>
    <div class="items">2</div>
    <div class="items">3</div>
    <div class="items">4</div>
    <div class="items">5</div>
    <div class="items">6</div>
</div>

Coté CSS: 

.container {
    background-color: #eee;
    width: 90%;
    margin: 30px auto;
    display: grid;
 
    grid-template-rows: repeat(2, 150px);
    grid-template-columns: minmax(200px, 700px) repeat(2, 1fr);  // ici minmax
}

Résolution 1900px: La colonne 1 est à 700px Résolution 909: La colonne 1 commence à diminuer Résolution 302: La colonne 1 préserve les 200px minimum

Autofill

Code de base : Coté HTML: 

<div class="container">
    <div class="items">1</div>
    <div class="items">2</div>
    <div class="items">3</div>
    <div class="items">4</div>
    <div class="items">5</div>
    <div class="items">6</div>
</div>

Coté CSS: 

.container {
    background-color: #eee;
    margin: 30px auto;
    display: grid;
 
    grid-template-rows: repeat(2, 150px);
    grid-template-columns: repeat(auto-fill, 100px);
    width: 1000px;
}

Autofit + MinMax() = responsive

Code de base : Coté HTML: 

<div class="container">
    <div class="items">1</div>
    <div class="items">2</div>
    <div class="items">3</div>
    <div class="items">4</div>
    <div class="items">5</div>
    <div class="items">6</div>
</div>

Coté CSS: 

.container {
    background-color: #eee;
    margin: 30px auto;
    display: grid;
 
    grid-template-rows: repeat(2, 150px);
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  //ici minmax
    grid-auto-rows: 150px;  //ici les lignes explicites seront de la même taille que les implicites
    width: 90%;
}

Résolution 1568: Résolution 805: Résolution 513:

Exemple simple: Blog

Il s'agit de positionner les éléments (div) comme une page de blog avec un header, bar de navigation, contenu et footer.
Coté HTML: 

<!DOCTYPE html>
<html lang="fr" dir="ltr">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
        <title>Blog CSS Grid</title>
    </head>
    <body>
        <div class="container">
            <div class="cell header">Header</div>
            <div class="cell side">SideBar</div>
            <div class="cell box">Box 1</div>
            <div class="cell box">Box 2</div>
            <div class="cell box">Box 3</div>
            <div class="cell main">Main content</div>
            <div class="cell footer">Footer</div>
        </div>
    </body>
</html>

Coté CSS: 

html {
    box-sizing: border-box;
    font-size: 62.5%;
}
body {
    background-color: #b0b0b0;
}
.container {
    font-size: 1.5rem;
    font-family: "sans serif";
    width: 70%;
    margin: 30px auto;
    display: grid;
    grid-gap: 15px;
    grid-template-rows:     [header-start]50px
                            [header-end box-start]100px
                            [box-end main-start]300px
                            [main-end footer-start]50px
                            [footer-end];
    grid-template-columns:  [side-start]120px
                            [side-end box1-start]1fr
                            [box1-end box2-start]1fr
                            [box2-end box3-start]1fr
                            [box3-end];
}
.cell {
    background-color: red;
    color: white;
    padding-top: 10px;
    padding-left: 10px;
}
.header {
    grid-column: side-start / box3-end;
}
.side {
    grid-row: box-start / main-end;
}
.box {
    height: 100px;
}
.main {
    grid-column: box1-start / box3-end;
}
.footer {
    grid-column: side-start / box3-end;
}