Tutoriel CSS Grid

CSS Grid est le petit nouveau de la ville CSS, et bien qu'il ne soit pas encore entièrement pris en charge par tous les navigateurs, ce sera le futur système de mise en page

La grille. Une frontière numérique. J'ai essayé d'imaginer des groupes d'informations alors qu'ils se déplaçaient dans l'ordinateur. A quoi ressemblent-ils? Navires? Motocyclettes? Les circuits étaient-ils des autoroutes? Je n'arrêtais pas de rêver d'un monde que je pensais ne jamais voir. Et puis un jour… je suis entré. - Tron: Legacy

Introduction à CSS Grid

CSS Grid est une approche fondamentalement nouvelle pour créer des mises en page à l'aide de CSS.

Gardez un œil surPage de mise en page de grille CSS sur caniuse.compour savoir quels navigateurs le prennent actuellement en charge. Au moment de la rédaction de cet article, en avril 2019, tous les principaux navigateurs (à l'exception d'IE, qui ne le supportera jamais) prennent déjà en charge cette technologie, couvrant 92% de tous les utilisateurs.

CSS Grid n'est pas un concurrent pourFlexbox. Ils interagissent et collaborent sur des mises en page complexes, car CSS Grid fonctionne sur 2 dimensions (lignes ET colonnes) tandis que Flexbox fonctionne sur une seule dimension (lignes OU colonnes).

La création de mises en page pour le Web a toujours été un sujet compliqué.

Je ne vais pas creuser les raisons de cette complexité, qui est un sujet complexe en soi, mais vous pouvez vous considérer comme un humain très chanceux car de nos joursvous avez 2 outils très puissants et bien supportés à votre disposition:

  • CSS Flexbox
  • Grille CSS

Ces 2 sont les outils pour construire les mises en page Web du futur.

À moins que vous n'ayez besoin de prendre en charge d'anciens navigateurs comme IE8 et IE9, il n'y a aucune raison de jouer avec des choses comme:

  • Dispositions de table
  • Flotteurs
  • hacks clearfix
  • display: tablehacks

Dans ce guide, il y a tout ce que vous devez savoir pour passer d'une connaissance zéro de CSS Grid à un utilisateur compétent.

Les bases

La disposition CSS Grid est activée sur un élément conteneur (qui peut être undivou toute autre balise) en définissantdisplay: grid.

Comme avec flexbox, vous pouvez définir certaines propriétés sur le conteneur et certaines propriétés sur chaque élément individuel de la grille.

Ces propriétés combinées détermineront l'aspect final de la grille.

Les propriétés les plus élémentaires du conteneur sontgrid-template-columnsetgrid-template-rows.

grid-template-columns et grid-template-rows

Ces propriétés définissent le nombre de colonnes et de lignes dans la grille et définissent également la largeur de chaque colonne / ligne.

L'extrait de code suivant définit une grille avec 4 colonnes chacune de 200 px de large et 2 lignes avec une hauteur de 300 px chacune.

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
}

A grid with 4 columns and 2 rows

Voici un autre exemple de grille avec 2 colonnes et 2 lignes:

.container {
  display: grid;
  grid-template-columns: 200px 200px;
  grid-template-rows: 100px 100px;
}

A grid with 2 columns and 2 rows

Dimensions automatiques

Plusieurs fois, vous pouvez avoir une taille d'en-tête fixe, une taille de pied de page fixe et le contenu principal dont la hauteur est flexible, en fonction de sa longueur. Dans ce cas, vous pouvez utiliser leautomot-clé:

.container {
  display: grid;
  grid-template-rows: 100px auto 100px;
}

Différentes dimensions de colonnes et de lignes

Dans les exemples ci-dessus, nous avons créé de jolies grilles régulières en utilisant les mêmes valeurs pour les lignes et les mêmes valeurs pour les colonnes.

Vous pouvez spécifier n'importe quelle valeur pour chaque ligne / colonne, pour créer un grand nombre de conceptions différentes:

.container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 100px 50px;
}

A grid with varying columns and rows dimensions

Un autre exemple:

.container {
  display: grid;
  grid-template-columns: 10px 100px;
  grid-template-rows: 100px 10px;
}

A grid with varying columns and rows dimensions

Ajout d'espace entre les cellules

Sauf indication contraire, il n'y a pas d'espace entre les cellules.

Vous pouvez ajouter un espacement en utilisant ces propriétés:

  • grid-column-gap
  • grid-row-gap

ou la syntaxe abrégéegrid-gap.

Exemple:

.container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 100px 50px;
  grid-column-gap: 25px;
  grid-row-gap: 25px;
}

A grid with gap between rows and columns

La même mise en page en utilisant la sténographie:

.container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 100px 50px;
  grid-gap: 25px;
}

Générer des éléments sur plusieurs colonnes et / ou lignes

Chaque élément de cellule a la possibilité d'occuper plus d'une case dans la ligne et de s'étendre horizontalement ou verticalement pour obtenir plus d'espace, tout en respectant les proportions de grille définies dans le conteneur.

Voici les propriétés que nous utiliserons pour cela:

  • grid-column-start
  • grid-column-end
  • grid-row-start
  • grid-row-end

Exemple:

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
}
.item1 {
  grid-column-start: 2;
  grid-column-end: 4;
}
.item6 {
  grid-column-start: 3;
  grid-column-end: 5;
}

Editing the dimensions of some cells

Les nombres correspondent à la ligne verticale qui sépare chaque colonne, à partir de 1:

The numbers correspond to the vertical line that separates each column

Le même principe s'applique àgrid-row-startetgrid-row-end, sauf que cette fois au lieu de prendre plus de colonnes, une cellule prend plus de lignes.

Syntaxe abrégée

Ces propriétés ont une syntaxe abrégée fournie par:

  • grid-column
  • grid-row

L'utilisation est simple, voici comment reproduire la mise en page ci-dessus:

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
}
.item1 {
  grid-column: 2 / 4;
}
.item6 {
  grid-column: 3 / 5;
}

Utilisantgrid-areaen sténographie

Legrid-areapropriété peut être utilisée comme un raccourci pour legrid-columnetgrid-rowshorthands, lorsque vous devez appliquer les deux à un seul élément. Au lieu d'avoir:

.item1 {
  grid-row: 1 / 4;
  grid-column: 3 / 5;
}

Vous pouvez utiliser

.item1 {
  grid-area: 1 / 3 / 4 / 5;
}

(grid-row-start / grid-column-start / grid-row-end / grid-column-end)

Utilisantspan

Une autre approche consiste à définir la colonne / ligne de départ et à définir le nombre qu'elle doit occuper en utilisantspan:

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
}
.item1 {
  grid-column: 2 / span 2;
}
.item6 {
  grid-column: 3 / span 2;
}

spanfonctionne également avec la syntaxe non abrégée:

.item1 {
  grid-column-start: 2;
  grid-column-end: span 2;
}

et vous pouvez également utiliser sur la propriété de départ. Dans ce cas, la position finale sera utilisée comme référence, etspancomptera «à rebours»:

.item1 {
  grid-column-start: span 2;
  grid-column-end: 3;
}

Plus de configuration de grille

Utiliser des fractions

Spécifier la largeur exacte de chaque colonne ou ligne n'est pas idéal dans tous les cas.

Une fraction est une unité d'espace.

L'exemple suivant divise une grille en 3 colonnes de même largeur,13de l'espace disponible chacun.

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

Utilisation de pourcentages et de rem

Vous pouvez également utiliser des pourcentages et mélanger et faire correspondre des fractions, des pixels, des rem et des pourcentages:

.container {
  grid-template-columns: 3rem 15% 1fr 2fr
}

Utilisantrepeat()

repeat()est une fonction spéciale qui prend un nombre qui indique le nombre de fois qu'une ligne / colonne sera répétée, et la longueur de chacune.

Si chaque colonne a la même largeur, vous pouvez spécifier la mise en page en utilisant cette syntaxe:

.container {
  grid-template-columns: repeat(4, 100px);
}

Cela crée 4 colonnes de même largeur.

Ou en utilisant des fractions:

.container {
  grid-template-columns: repeat(4, 1fr);
}

Spécifiez une largeur minimale pour une ligne

Cas d'utilisation courant: avoir une barre latérale qui ne réduit jamais plus d'un certain nombre de pixels lorsque vous redimensionnez la fenêtre.

Voici un exemple où la barre latérale prend14de l'écran et ne prend jamais moins de 200px:

.container {
  grid-template-columns: minmax(200px, 3fr) 9fr;
}

Vous pouvez également définir uniquement une valeur maximale à l'aide de laautomot-clé:

.container {
  grid-template-columns: minmax(auto, 50%) 9fr;
}

ou juste une valeur minimale:

.container {
  grid-template-columns: minmax(100px, auto) 9fr;
}

Positionnement des éléments à l'aidegrid-template-areas

Par défaut, les éléments sont positionnés dans la grille en utilisant leur ordre dans la structure HTML.

Utilisantgrid-template-areasVous pouvez définir des zones de modèle pour les déplacer dans la grille, et également pour générer un élément sur plusieurs lignes / colonnes au lieu d'utilisergrid-column.

Voici un exemple:

<div class="container">
  <main>
    ...
  </main>
  <aside>
    ...
  </aside>
  <header>
    ...
  </header>
  <footer>
    ...
  </footer>
</div>
.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
  grid-template-areas:
    "header header header header"
    "sidebar main main main"
    "footer footer footer footer";
}
main {
  grid-area: main;
}
aside {
  grid-area: sidebar;
}
header {
  grid-area: header;
}
footer {
  grid-area: footer;
}

Malgré leur commande d'origine, les articles sont placés là oùgrid-template-areasdéfinir, en fonction de lagrid-areapropriété qui leur est associée.

Ajout de cellules vides dans les zones de modèle

Vous pouvez définir une cellule vide à l'aide du point.au lieu d'un nom de zone dansgrid-template-areas:

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
  grid-template-areas:
    ". header header ."
    "sidebar . main main"
    ". footer footer .";
}

Remplir une page avec une grille

Vous pouvez étendre une grille pour remplir la page en utilisantfr:

.container {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

Voici un exemple simple d'utilisation de CSS Grid pour créer une mise en page de site qui fournit un en-tête en haut, une partie principale avec une barre latérale à gauche et un contenu à droite, et un pied de page par la suite.

Layout example

Voici le balisage:

<div class="wrapper">
  <header>Header</header>
  <article>
    <h1>Welcome</h1>
    <p>Hi!</p>
  </article>
  <aside><ul><li>Sidebar</li></ul></aside>
  <footer>Footer</footer>
</div>

et voici le CSS:

header {
  grid-area: header;
  background-color: #fed330;
  padding: 20px;
}
article {
  grid-area: content;
  background-color: #20bf6b;
  padding: 20px;
}
aside {
  grid-area: sidebar;
  background-color: #45aaf2;
}
footer {
  padding: 20px;
  grid-area: footer;
  background-color: #fd9644;
}
.wrapper {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 3fr;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
}

J'ai ajouté quelques couleurs pour le rendre plus joli, mais en gros, il attribue à chaque étiquette différente ungrid-areanom, qui est utilisé dans legrid-template-areaspropriété dans.wrapper.

Lorsque la mise en page est plus petite, nous pouvons placer la barre latérale sous le contenu à l'aide d'une requête multimédia:

@media (max-width: 500px) {
  .wrapper {
    grid-template-columns: 4fr;
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "footer";
  }
}

Voir sur CodePen

Voir le styloExemple de grille CSS avec barre latéralepar Flavio Copes (@flaviocopes) surCodePen.

Tech Wiki Online!