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
- Les bases
- Utilisant
grid-area
en sténographie - Utilisant
span
- Plus de configuration de grille
- Remplir une page avec une grille
- Un exemple: en-tête, barre latérale, contenu et pied de page
- Emballer
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: table
hacks
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 undiv
ou 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-columns
etgrid-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;
}
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;
}
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 leauto
mot-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;
}
Un autre exemple:
.container {
display: grid;
grid-template-columns: 10px 100px;
grid-template-rows: 100px 10px;
}
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;
}
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;
}
Les nombres correspondent à la ligne verticale qui sépare chaque colonne, à partir de 1:
Le même principe s'applique àgrid-row-start
etgrid-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-area
en sténographie
Legrid-area
propriété peut être utilisée comme un raccourci pour legrid-column
etgrid-row
shorthands, 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;
}
span
fonctionne é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, etspan
comptera «à 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,1⁄3de 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 prend1⁄4de 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 laauto
mot-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-areas
Vous 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-areas
définir, en fonction de lagrid-area
proprié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;
}
Un exemple: en-tête, barre latérale, contenu et pied de page
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.
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-area
nom, qui est utilisé dans legrid-template-areas
proprié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 le styloExemple de grille CSS avec barre latéralepar Flavio Copes (@flaviocopes) surCodePen.
Tech Wiki Online!