Un guide complet sur l'utilisation de CSS Grid

Grille CSS: liens rapides

Comment définir la grille
Positionner des éléments à l'aide de numéros de ligne
Positionner les éléments à l'aide des noms de zone
Créez une mise en page réactive
Solutions de secours pour les anciens navigateurs
Ressources CSS Grid

Le module CSS Grid Layout introduit un nouveau système polyvalent de positionnement des éléments dans un mise en page du site Web grâce à l'utilisation d'une grille hautement personnalisable. CSS Grid est désormais pris en charge par les deux dernières versions de tous les principaux navigateurs. Il est donc temps que nous l’adoptions dans tous nos projets. Dans ce didacticiel, nous examinerons en détail comment utiliser les principales propriétés de CSS Grid.

Pour d'autres options, consultez notre guide des meilleurs Générateur de site Web . Et assurez-vous de vérifier votre hébergement Web fonctionne pour les besoins de votre site.

Qu'est-ce que CSS Grid?

Grille CSS

Avec CSS Grid, les concepteurs peuvent créer des mises en page complètement différentes spécifiques à un appareil en CSS pur

CSS Grid est un outil extrêmement puissant pour la mise en page des éléments. Il introduit une flexibilité sans précédent dans la mise en page, en utilisant uniquement du CSS pur et sans éléments de positionnement absolus (une technique qui peut conduire à de nombreux problèmes). CSS Grid nous permet d'obtenir des mises en page extrêmement diverses et spécifiques à l'appareil à partir du même balisage HTML exact.

Nous n'avons plus besoin de nous fier aux hacks, au positionnement absolu ni à la manipulation du DOM JavaScript pour réaliser des mises en page dynamiques et changeantes. CSS Grid offre aux concepteurs un canevas vierge pour créer les mises en page qu'ils souhaitent sans avoir à se soucier de la façon de les réaliser, inaugurant une nouvelle ère de conception et de développement Web sans les limitations CSS et les solutions de contournement du passé.

Comment définir la grille

Pour créer une grille dans un conteneur, il faut lui attribuer la propriété CSS affichage: grille . Le nombre de colonnes et de lignes est déterminé par le nombre de tailles séparées par des espaces affectées à grille-modèle-colonnes et grid-template-rows respectivement .

Les tailles peuvent être n'importe quelle unité CSS valide telle que px ou vw , ou la auto mot clé qui permet aux colonnes ou aux lignes de s'étendre sur l'espace disponible. Par exemple, grid-template-columns: 10px auto conduit à une colonne 10px suivie d'une deuxième colonne qui remplit tout l'espace disponible.

Grid utilise également une unité `` fractionnaire '' fr qui provoque la distribution de tout espace restant en colonnes ou en lignes en fonction des ratios de ces unités. grille-modèle-lignes: 1fr 2fr crée deux lignes dynamiques avec la seconde deux fois la taille de la première, tandis que grille-modèle-colonnes: 1fr 1fr 1fr 1fr définit quatre colonnes de taille égale. Ce dernier peut être simplifié en utilisant le nouveau répéter() fonction pour grid-template-columns: répéter (4, 1fr) .

une grille avec les nombres 1-16 dedans

Grille avec des cellules de taille égale résultant de colonnes de largeur dynamique et de proportions égales et de lignes de 75 pixels de hauteur

Une grille peut donc être créée à l'intérieur d'un conteneur de grille de classe avec quatre colonnes dynamiques de taille égale et quatre lignes de 75px de hauteur (comme indiqué ci-dessus) en utilisant:

.grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 75px); }

Des grilles complexes avec des cellules de taille inégale peuvent être créées en combinant les différentes unités mentionnées précédemment. Nous pouvons également utiliser le min max() pour définir les tailles minimale et maximale des colonnes et des lignes dynamiques. D'où, grid-template-rows: 40px 2fr répéter (2, minmax (75px, 1fr)) conduit à quatre rangées avec le premier 40px de haut, les trois autres étirés sur l'espace restant dans un rapport 2: 1: 1, et les deux derniers ayant une hauteur minimale de 75px, ce qui définit la hauteur minimale de la deuxième rangée à 150px.

Une fois la grille créée, les lignes de la grille, représentées par des lignes pointillées dans les images, sont automatiquement numérotées à partir du haut pour les lignes ou de la gauche pour les colonnes. Les lignes reçoivent également un deuxième nombre négatif par rapport à leur index à partir du bas pour les lignes ou de la droite pour les colonnes.

Par exemple, la première ligne verticale en pointillé à gauche dans les grilles ci-dessus est 1 et -5 , et la troisième ligne est 3 et -deux . Ces nombres peuvent être utilisés comme lignes de délimitation des éléments placés dans la grille. Les lignes de la grille peuvent également être nommées en ajoutant une chaîne entre crochets dans les déclarations de propriété, par exemple grid-template-rows: [1st] 1fr [second-line] 1fr [last] .

grille 1-16 avec 5-8 carrés plus grands

Grille avec des hauteurs minimales et maximales créées à l'aide d'une combinaison de px et fr unités et le min max() fonction

Semblable à Flexbox , la position horizontale et verticale des éléments placés dans la grille peut être contrôlée en définissant justify-items et align-items respectivement, à début , centre , finir ou s'étirer .

Il en va de même pour les positions des colonnes et des lignes de la grille dans un conteneur plus grand en justifier le contenu et align-content respectivement. Les options valides pour ces propriétés incluent également l'espace entre , où l'espace supplémentaire est divisé entre les colonnes / lignes, ainsi que espace autour et espace-uniformément où l'espace est divisé uniformément entre les colonnes / lignes avec le même ou la moitié de l'espace aux extrémités respectivement. On peut aussi définir align-content et justifier le contenu (dans cet ordre) en utilisant contenu de lieu , et align-items et justify-items utilisant objets de lieu .

Positionnement des éléments à l'aide de numéros de ligne

Pour placer un élément dans la grille, nous pouvons définir son grille-colonne-début et grille-colonne-fin properties aux numéros de ligne verticale entre lesquels l'élément doit être étiré. Pour les lignes, les propriétés sont début de ligne de grille et fin de ligne de grille - et bien sûr les nombres se réfèrent aux lignes horizontales.

grille 1-16 avec deux éléments

Les éléments peuvent être contenus dans une seule cellule de grille ou étendus sur plusieurs colonnes et grilles

Nous pourrions également utiliser les shorthands grille-colonne et ligne de grille , en les définissant uniquement sur la ligne de grille de départ, ce qui entraîne l'étirement automatique de l'élément jusqu'à la ligne de grille suivante uniquement. Conformément à l'image ci-dessus, en utilisant ces méthodes, objet 1 peut être placé entre les lignes verticales 2 et 4 et les lignes horizontales 3 et -1 (dernière ligne ou première à partir du bas), et item2 de la ligne verticale 3 et de la ligne horizontale 1 aux lignes de quadrillage suivantes en utilisant:

#item1 { grid-column-start: 2; grid-column-end: 4; grid-row-start: 3; grid-row-end: -1; } #item2 { grid-column: 3; grid-row: 1; }

Pour simplifier davantage, les déclarations grille-colonne-début: 2 et grille-colonne-fin: 4 peuvent être combinés comme grille-colonne: 2/4 , avec la même chose applicable pour les lignes utilisant ligne de grille .

La mise en garde avec l'utilisation de ces méthodes de placement est que certaines des déclarations sont quelque peu fausses. Par exemple, grille-colonne-fin: 4 et grille-colonne: 2/4 peut être mal interprété comme signifiant «placement du produit fini dans la colonne 4» et «placer l'article dans les colonnes 2, 3 et 4» respectivement. Ce n'est bien sûr pas le cas car les nombres représentent les lignes de la grille plutôt que les colonnes. Pour éviter cet écueil potentiel, nous pouvons déclarer le numéro de ligne de départ de la grille et le nombre de colonnes ou de lignes sur lesquelles l'élément doit s'étendre, utilisez le mot-clé span.

articles 1 et 2 dans des boîtes plus grandes sur la grille

Utilisez le mot-clé span pour déterminer le nombre de colonnes ou de lignes que vous souhaitez qu'un élément couvre

En utilisant ces méthodes, nous pouvons repositionner objet 1 entre les lignes horizontales 2 et 4 et les lignes verticales 1 et 2, et l'élément 2 à partir de la ligne verticale 2 et s'étendant sur trois colonnes et à partir de la ligne horizontale 3 s'étendant sur deux lignes (comme dans l'image ci-dessus) en utilisant:

#item1 { grid-column: 1; grid-row: 2 / 4; } #item2 { grid-column: 2 / span 3; grid-row: 3 / span 2; }

Croyez-le ou non, le placement des articles peut être encore simplifié avec la propriété zone de grille , qui est un raccourci pour début de ligne de grille , grille-colonne-début , fin de ligne de grille et grille-colonne-fin dans cet ordre. Si seules les deux premières propriétés sont définies, l'élément sera automatiquement placé entre ces lignes et les suivantes.

Cette propriété de grille permet également de combiner les numéros de ligne avec le mot clé span. En appliquant ces méthodes, nous pouvons repositionner objet 1 et item2 En tant que tel:

#item1 { grid-area: 2 / 1 / span 2 / span 3; } #item2 { grid-area: 4 / 4; }

Positionnement des éléments à l'aide des noms de zone

Bien que l'utilisation des numéros de ligne de grille et du portée Le mot-clé est un excellent moyen de positionner des éléments, il existe un moyen encore plus intuitif et simple de placer des éléments dans la grille. Il s'agit d'utiliser le zone de grille et zones de modèle de grille Propriétés.

Pour ce faire, chaque élément à positionner dans la grille doit d'abord se voir attribuer un nom en définissant sa zone de grille propriété à une chaîne qui peut ensuite être incluse dans la grille zones de modèle de grille déclaration. Il devient alors possible de définir zones de modèle de grille en utilisant une «carte» visuelle dans laquelle les lignes sont placées entre guillemets, le contenu de chaque cellule de la grille étant représenté par une chaîne appartenant au zone de grille les noms des éléments.

Les cellules vides sont symbolisées par un point ( . ) et les espaces signifient des lignes de quadrillage verticales. Les lignes peuvent être placées sur de nouvelles lignes pour fournir une représentation visuelle de la grille, comme suit:

#item1 { grid-area: item1; } #item2 { grid-area: item2; } .grid { grid-template-areas: '. . . .' '. . . item1' 'item2 item2 item2 item1' 'item2 item2 item2 .'; }

Comment créer une mise en page réactive à l'aide de CSS Grid

CSS Grid peut être utilisé avec des requêtes multimédias pour restructurer des éléments sur différentes tailles d'écran sans changer le balisage. La forme, la taille et la position de l'article peuvent toutes être complètement modifiées, conduisant ainsi à une mise en page vraiment réactive et hautement personnalisée.

une liste de différentes hiérarchies

Figure 1

Disons que nous avons une liste d'éléments générés à partir de ce balisage HTML (figure 1):

une mise en page avec différents éléments à différents endroits

Figure 2

En utilisant ce que nous avons appris sur Grid jusqu'à présent, nous pouvons appliquer des styles pour des écrans plus larges que 720px, en utilisant une requête multimédia (figure 2):

@media (min-width: 721px) { .header { grid-area: header; } .menu { grid-area: menu; } .hero { grid-area: hero; } .main { grid-area: main; } .banner { grid-area: banner; } .extra { grid-area: extra; } .image { grid-area: image; } .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 40px 2fr repeat(4, 1fr); grid-template-areas: 'header header header header' 'hero hero hero hero' 'menu main main main' 'menu main main main' 'menu banner banner banner' 'menu extra image image'; } }

disposition différente

figure 3

Nous pouvons également facilement repositionner et redimensionner les éléments pour des écrans plus grands qui sont plus larges que 1000px en utilisant une autre requête multimédia (figure 3):

@media (min-width: 1001px) { .grid { grid-template-areas: 'header menu menu menu' 'hero hero hero hero' 'hero hero hero hero' 'main main . image' 'main main . extra' 'banner banner banner banner'; } }

Ce n’est pas tout: le nombre de colonnes et de lignes de la grille peut même être modifié pour tenir compte de certaines tailles d’écran, si cela est souhaité, en redéfinissant grille-modèle-colonnes et / ou grid-template-rows dans les requêtes des médias.

Les éléments qui se chevauchent peuvent également être obtenus à l'aide de CSS Grid. Plusieurs éléments peuvent occuper les mêmes cellules de grille et peuvent donc se chevaucher, en utilisant le index z propriétés des éléments pour contrôler l'ordre dans lequel ils s'empilent.

une mise en page différente, avec une barre d

Graphique 4

Par exemple, nous pouvons ajouter un élément semi-transparent avec la barre d'outils de classe à l'intérieur du conteneur de la grille et le positionner dans la colonne la plus à droite afin qu'il chevauche tous les autres éléments (figure 4):

.toolbar { grid-column: 4; grid-row: 1 / -1; opacity: .85; z-index: 1; }

mise en page Web différente

Figure 5

Le dernier aspect que nous aborderons est l'espacement entre les colonnes et les lignes ou les espaces (figure 5). Les éléments de la grille peuvent être séparés à l'aide du grille-colonne-espace ou grid-row-gap propriétés qui définissent respectivement la taille de l'écart entre les colonnes et les lignes. La propriété abrégée grid-gap peut définir les deux.

Solutions de secours CSS Grid pour les navigateurs plus anciens

La disposition des propriétés CSS Grid sous les propriétés mobiles garantit que les navigateurs qui ne prennent toujours pas en charge Grid l'ignoreront et afficheront la version mobile. Nous pouvons également ajouter une disposition de secours de base en utilisant @les soutiens , une requête qui applique des règles basées sur la prise en charge du navigateur pour une fonctionnalité CSS spécifique. Nous pouvons ainsi définir une disposition de secours pour des tailles d'écran supérieures à 720px:

@supports not (display: grid) { @media (min-width: 721px) { .header, .extra { float: left; width: 50%; } } }

Si, pour une raison quelconque, vous avez besoin que cette solution de secours soit affichée pour Internet Explorer 10 et 11, qui ne prend pas en charge Grid ni, ironiquement, le @les soutiens requête, vous pouvez utiliser une requête bien connue qui applique des styles uniquement dans IE10 et 11:

@media (min-width: 721px) and (-ms-high-contrast: none), (-ms-high-contrast: active) { .header, .extra { float: left; width: 50%; } }

Si vous avez besoin d'un support IE9 et plus ancien, chargez une feuille de style supplémentaire dans le HTML avec les styles appropriés en utilisant:

Ressources CSS Grid

Pour plus d'informations et des didacticiels sur le module CSS Grid, consultez les ressources suivantes.

Documents Web MDN
Comme toujours, le site de documentation Web de Mozilla Developer Network est un excellent point de départ - ou auquel revenir en permanence en fonction de la puissance de votre mémoire - pour les ressources de développement Web. Sa page de mise en page CSS Grid en particulier contient des explications sur toutes les propriétés de Grid, ainsi que des exemples interactifs que vous pouvez essayer par vous-même.

Scrimba interactif: tutoriel CSS Grid
Scrimba est une plateforme de cours de code interactifs. Vous pouvez mettre les vidéos en pause, modifier le code qu'elles contiennent et voir les résultats avant de reprendre le didacticiel. C’est un moyen fantastique d’apprendre le codage et le cours CSS Grid en 14 parties de Per Harald Borgen est idéal pour ceux qui préfèrent les didacticiels vidéo.

Jeu de Grid Garden
Les jeux constituent une excellente façon interactive d'apprendre à coder. Grid Garden est un jeu en ligne qui vous permet d'arroser un jardin de carottes en tapant les propriétés CSS Grid dans un éditeur. C'est très amusant et étonnamment satisfaisant, même si votre récolte n'est que numérique.

Concevoir un site en équipe? Ton stockage en ligne service aidera tout le monde à rester sur la même longueur d'onde.

Cet article a été initialement publié dans rapporter , le magazine le plus vendu au monde pour les concepteurs et développeurs Web. Acheter numéro 309 ou s'abonner .

Lire la suite: