TL;DR
Si vous connaissez bien Flexbox, la grille devrait vous sembler familière. Rachel Andrew maintient une excellente site Web dédié à la grille CSS pour vous aider à obtenir pour commencer. La grille est désormais disponible dans Google Chrome.
Flexbox? Grille ?
Ces dernières années, le CSS Flexbox est devenu largement utilisé et compatibilité avec le navigateur (sauf si vous faites partie des personnes mal intentionnées qui doivent prendre en charge Internet Explorer 9 et versions antérieures). Flexbox a facilité de nombreuses tâches de mise en page complexes, comme l'espacement à distance égale entre les éléments, les mises en page de haut en bas ou le Saint-Graal de la magie CSS: un centrage vertical.
Mais hélas, les écrans ont généralement une deuxième dimension dont nous devons nous soucier. À moins de vous occuper vous-même du dimensionnement des éléments, malheureusement, vous ne pouvez pas à la fois au rythme vertical et horizontal en n'utilisant que le Flexbox. C'est où CSS Grid vient à la rescousse.
CSS Grid est en cours de développement, derrière un indicateur dans la plupart des navigateurs depuis plus de cinq ans et du temps supplémentaire consacré à l'interopérabilité pour éviter une de lancement avec des bugs comme Flexbox. Donc, si vous utilisez la grille pour implémenter votre mise en page dans Chrome, vous obtiendrez probablement le même résultat dans Firefox et Safari. Au au moment de la rédaction, l'implémentation Microsoft Edge de Grid est obsolète ( comme dans IE11.) et que la mise à jour "en cours de réflexion".
Malgré les similitudes en termes de concept et de syntaxe, ne pensez pas à Flexbox et à la grille comme des techniques de mise en page concurrentes. La grille est disposée en deux dimensions, tandis que Flexbox présente en un. Il existe une synergie lorsque vous utilisez les deux ensemble.
Définir une grille
Pour vous familiariser avec les différentes propriétés de la grille, je vous recommande vivement Rachel Andrew's Grid By Example ou CSS Tricks Aide-mémoire. Si vous connaissez Flexbox, un grand nombre de ses propriétés et leur signification doivent être que vous connaissez déjà.
Examinons une mise en page de grille standard à 12 colonnes. Le modèle classique à 12 colonnes mise en page est populaire car le nombre 12 est divisible par 2, 3, 4 et 6, et est donc utile pour de nombreuses conceptions. Implémentons cette mise en page:
Commençons par notre code de balisage:
<!DOCTYPE html>
<body>
<header></header>
<nav></nav>
<main></main>
<footer></footer>
</body>
Dans notre feuille de style, nous commençons par développer body pour qu'il couvre l'intégralité
fenêtre d'affichage et la transformer en conteneur de grille:
html, body {
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
}
body {
display: grid;
}
Nous utilisons maintenant la grille CSS. Parfait !
L'étape suivante consiste à implémenter les lignes et les colonnes de notre grille. Nous pourrions implémenter les 12 colonnes de notre maquette, mais comme nous n'utilisons pas toutes les colonnes, cela rendrait notre CSS inutilement désordonné. Par souci de simplicité, nous implémenterons la mise en page comme suit:
L'en-tête et le pied de page ont une largeur variable et le contenu est variable dans les deux dimensions. La navigation est également variable dans les deux dimensions, nous lui imposerons une largeur minimale de 200 pixels. (Pourquoi ? Pour montrer les caractéristiques une grille CSS, évidemment.)
Dans la grille CSS, les ensembles de colonnes et de lignes sont appelés pistes. Commençons par définissant notre premier ensemble de pistes, les lignes:
body {
display: grid;
grid-template-rows: 150px auto 100px;
}
grid-template-rows prend une séquence de tailles qui définissent les lignes individuelles.
Dans ce cas, la première ligne a une hauteur de 150 pixels et la dernière une hauteur de 100 pixels.
La ligne du milieu étant définie sur auto, elle s'ajuste automatiquement
pour accueillir les éléments de grille (les enfants du conteneur) dans
de cette ligne. Puisque notre corps est étiré sur toute la fenêtre d'affichage, la trajectoire
contenant le contenu (en jaune dans l'image ci-dessus) remplira au moins tous les
l'espace disponible, mais augmentera (et fera défiler le document)
nécessaires.
Pour les colonnes, nous voulons adopter une approche plus dynamique: nous voulons à la fois le contenu augmente (et diminue), mais la navigation ne doit jamais être inférieure à 200 pixels. et nous voulons que le contenu soit plus grand que la navigation. Dans Flexbox, nous utilisons flex-grow et flex-shrink, mais dans la grille, c'est un peu différent:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
}
Nous définissons deux colonnes. La première colonne est définie à l'aide de la propriété minmax()
, qui accepte deux valeurs: la taille minimale et la taille maximale de cette piste.
(comme min-width et max-width à la fois). La largeur minimale est, comme nous
évoqué précédemment : 200px. La largeur maximale est de 3fr. fr est spécifique à la grille.
qui permet de répartir l'espace disponible entre les différents éléments de la grille.
fr signifie probablement "fraction unit" (unité de fraction), mais pourrait bientôt désigner l'unité libre.
Nos valeurs indiquent que les deux colonnes
s'agrandissent pour remplir l'écran, mais que
la colonne "content" est toujours trois fois plus large que la colonne de navigation (à condition que la valeur
la colonne de navigation reste plus large que 200 pixels).
Bien que l'emplacement des éléments de la grille ne soit pas encore correct, la taille des éléments lignes et colonnes se comportent correctement et produit le comportement que nous visions:
Positionner les articles
L'une des fonctionnalités les plus puissantes de la grille est
de pouvoir placer des éléments sans
en ce qui concerne l'ordre DOM. Toutefois, comme les lecteurs d'écran
naviguent dans le DOM,
nous vous conseillons vivement de garder à l'esprit
vous réorganisez les éléments.) Si aucun placement manuel n'est effectué, les éléments sont placés
dans l'ordre DOM, de gauche à droite et de haut en bas. Chaque élément
occupe une cellule. L'ordre dans lequel la grille est remplie peut être modifié en utilisant
grid-auto-flow
Alors, comment placer les éléments ? Le moyen le plus simple de placer les éléments de la grille est de définissant les colonnes et les lignes qu'ils couvrent. La grille propose deux syntaxes pour ce faire: Dans la première syntaxe, vous définissez des points de départ et d'arrivée. Dans la seconde, vous définissez un point de départ et un segment:
header {
grid-column: 1 / 3;
}
nav {
grid-row: 2 / span 2;
}
Nous voulons que l'en-tête commence dans la première colonne et se termine avant la troisième colonne. Notre navigation doit commencer sur la deuxième ligne et s'étendre sur deux lignes au total.
Techniquement, nous avons terminé l'implémentation de notre mise en page, mais je veux vous en montrer quelques fonctionnalités pratiques fournies par la grille pour faciliter le placement. La vous pouvez nommer les bordures de vos rails et les utiliser emplacement:
body {
display: grid;
grid-template-rows: 150px [nav-start] auto 100px [nav-end];
grid-template-columns: [header-start] minmax(200px, 3fr) 9fr [header-end];
}
header {
grid-column: header-start / header-end;
}
nav {
grid-row: nav-start / nav-end;
}
Le code ci-dessus permet d'obtenir la même mise en page que le code précédent.
Plus efficace encore est la fonctionnalité permettant de nommer des régions entières dans votre grille:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
grid-template-areas: "header header"
"nav content"
"nav footer";
}
header {
grid-area: header;
}
nav {
grid-area: nav;
}
grid-template-areas accepte une chaîne de noms séparés par un espace, ce qui permet au
développeur de donner un nom à chaque cellule. Si deux cellules adjacentes ont le même nom,
elles seront fusionnées dans la même zone. De cette façon, vous
pouvez fournir plus
à votre code de mise en page et rendre
les requêtes média plus intuitives. Encore une fois,
génère la même mise en page qu'auparavant.
Y a-t-il autre chose ?
Oui, il y a bien trop de choses à aborder dans un seul article de blog. Rachel Andrew, GDE, est une application Experte du groupe de travail CSS, qui travaille avec eux depuis le début pour s’assurer que la grille simplifie la conception web. Elle a même écrit un livrer dessus. Son le site Web Grid By Example vous permet ressource pour se familiariser avec la grille. Beaucoup de gens pensent que la grille est un révolutionnaire pour la conception Web. Elle est désormais activée par défaut dans Chrome pour que vous puissiez qui l'utilisent aujourd'hui.