Création de mises en forme avec une grille CSS –

L’introduction suivante à CSS Grid est un extrait du livre à paraître de Tiffany, CSS Master, 2e édition qui sera disponible sous peu.

CSS Grid est une spécification de mise en page relativement récente, livrée dans la plupart des navigateurs à partir d’octobre 2017. Grid nous permet de créer des dispositions qui étaient auparavant impossibles, ou seulement possibles avec beaucoup d’opérations DOM.

N'oubliez pas que la spécification CSS Grid est dense et introduit plusieurs nouveaux des concepts assez complexes. Considérez ceci comme une vue d’ensemble plutôt qu’un regard complet sur la grille. Ne vous inquiétez pas, nous vous indiquerons de nombreuses ressources pour en apprendre davantage.

Contexte de formatage de la grille

L'ajout de de display: grid à un élément déclenche un contexte de formatage de grille pour cet élément et ses enfants. Dans un contexte de formatage de grille, trois choses se produisent:

1. L'élément devient un élément de niveau bloc qui participe au flux normal.
2. Ses enfants, qu'il s'agisse d'éléments ou de nœuds de texte, créent des blocs de type bloc, de niveau grille. peut être organisé en rangées et en colonnes. Les enfants immédiats d'un conteneur de grille sont les éléments de la grille .
3. Dans un mode d'écriture horizontal, chaque membre d'une ligne de la grille aura la même hauteur que son élément le plus haut (comme déterminé par le contenu), sauf explicite la valeur de hauteur est définie. Lorsque le document utilise un mode d'écriture vertical, sa longueur est identique à celle de l'élément le plus long (en fonction du contenu).

display: grid crée un conteneur au niveau du bloc et des blocs de blocs pour ses enfants

L'utilisation de display: inline-grid fonctionne de la même manière. Les enfants des conteneurs de grille au niveau ligne créent des boîtes au niveau de la grille, mais le conteneur lui-même participe à un contexte de formatage en ligne.

display: inline-grid crée une boîte de niveau en ligne pour le conteneur, mais des blocs pour ses enfants

Par eux-mêmes, display: grille et : inline-grid n'organisera pas automatiquement ces zones en lignes et en colonnes. Nous devons également indiquer au navigateur où et comment placer les objets.

Avant de créer votre grille, déterminez si vous souhaitez un nombre fixe de colonnes et / ou de lignes, si vous souhaitez que le navigateur calcule le nombre de colonnes et lignes automatiquement, ou si vous souhaitez un mélange des deux. Savoir quel type de grille vous souhaitez créer détermine l’approche que vous allez adopter. Voyons quelques techniques.

Définition d’une structure de grille

Après avoir défini un conteneur de grille, nous devons indiquer au navigateur le nombre de lignes et de colonnes que doit contenir notre grille. Nous pouvons définir le nombre de lignes et de colonnes à l'aide des propriétés de modèle de grille-lignes et de modèles de grille-colonnes .

Les colonnes de modèle de grille et de colonnes de modèle de grille acceptent ce qu’on appelle une liste de pistes . La liste de pistes est une chaîne séparée par des espaces qui spécifie le nom des lignes de la grille et la taille de chaque position dans la ligne ou la colonne.

Chaque valeur d'une liste de pistes crée un nouvel espace – une piste . – dans la rangée ou la colonne. Vous pouvez utiliser des longueurs, des unités de longueur flexibles (décrites plus loin dans ce chapitre) ou des pourcentages. Vous pouvez également utiliser les valeurs de dimensionnement telles que auto min-content et max-conent .

. Grid {
    affichage: grille;
    Grille-modèle-colonnes: 25rem 25rem 25rem;
    grid-template-rows: 10rem 10rem;
}

Dans le code ci-dessus, nous avons défini une grille avec trois colonnes, chacune 25rem de large et deux lignes, chacune de 10rem de hauteur. Appliquons-le au code HTML suivant. Oui, c'est tout le balisage requis:

    
 Élément de grille A 
    
 Élément de grille B 
    
 Élément de grille C 
    
 Élément de grille D 
    
 L'élément de grille E 

Nos éléments de grille sont organisés en colonnes et en lignes comme indiqué ci-dessous

Création d'une grille explicite avec columns et grid-template-rows

Ici, nous avons créé une grille de rangées et de colonnes de taille égale, mais ce n'est pas une exigence de Grid. Modifions légèrement notre CSS. Nous allons changer la valeur de colonnes-modèle-grille en 25rem 15rem 25rem :

 .grid {
    affichage: grille;
    Grille-modèle-colonnes: 25rem 15rem 25rem;
    grid-template-rows: 10rem 10rem;
}

La deuxième colonne de notre grille est plus étroite que la première et la troisième

Les colonnes et les lignes de la grille n'ont pas nécessairement la même largeur.

Grille explicite et grilles implicites

Dans la section précédente, nous avons explicitement indiqué que cette grille devrait avoir six cellules de grille disponibles formées de trois colonnes et de deux lignes. C’est ce qu’on appelle une grille explicite . Ici, notre conteneur de grille n'a que cinq enfants. La position restante est vide. Voyons ce qui se passe lorsque nous ajoutons plus d'enfants au conteneur.

Lorsque les éléments de la grille dépassent le nombre de cellules explicitement définies, les autres éléments sont disposés dans une grille implicite

Nous avons maintenant trois lignes. Notez cependant que notre troisième rangée n’a que la hauteur de son contenu et de son remplissage. Cela fait partie de la grille car ces éléments sont les enfants d’un conteneur de grille. Pourtant, la ligne n’est pas explicitement définie par grid-template-rows . Nous avons plutôt une grille implicite – une grille explicite avec des éléments de grille supplémentaires dépassant le nombre défini de cellules de grille explicites.

Les éléments d'une grille implicite sont auto dimensionnés par défaut. Les éléments de la grille se développeront pour s'adapter à leur contenu ou remplir l'espace vertical restant dans le conteneur, selon la plus grande des deux. Si, par exemple, nous définissons la propriété height de notre conteneur sur 50rem notre chemin de grille implicite s’étendra à 30rem .

La grille implicite les lignes se développent pour couvrir la hauteur disponible du conteneur

Si nous ajoutons suffisamment d'éléments pour créer une quatrième ligne, la hauteur de nos éléments de grille implicites sera répartie de manière uniforme. à travers le 30rem d’espace vertical restant dans le conteneur. Leur hauteur calculée sera 15rem chacun.

. La hauteur des lignes de grille implicites sera également répartie. sur l'espace restant dans le conteneur de grille

Dans notre exemple d'origine, nous avons explicitement défini uniquement deux lignes d'une hauteur de 10rem chacune. Par conséquent, notre troisième ligne est définie par défaut sur auto . dimensionnement. Sa hauteur sera ajustée à la taille de son contenu et de son remplissage.

Spécification de la taille de piste pour une grille implicite

Il est toutefois possible de définir un type de hauteur ou de largeur explicite et par défaut pour les éléments de grille implicites à l'aide du paramètre propriétés de grille automatique et de grille automatique . Mettons à jour notre CSS avec grille-lignes automatiques :

 .grid {
    affichage: grille;
    Grille-modèle-colonnes: 25rem 15rem 25rem;
    grid-template-rows: 10rem 10rem;
    grid-auto-rows: 30rem;
}

Les éléments de notre troisième ligne (et de toutes les lignes suivantes) auront une hauteur de 30rem .

Utilisation de ] grid-auto-rows pour spécifier la hauteur d'éléments de grille implicites

L'utilisation des propriétés grid-auto - * présente un inconvénient: lorsque le contenu d'un élément de grille dépasse ses dimensions, ils débordent du conteneur (voir ci-dessous) et peuvent être visuellement coupés par des éléments d'autres rangées.

Le contenu d'un conteneur de grille peut déborder conteneur lors de l’utilisation d’unités de longueur ou de pourcentage

Pour éviter cela, utilisez la fonction minmax () . Réécrivons notre code CSS pour utiliser minmax () :

 .grid {
    affichage: grille;
    Grille-modèle-colonnes: 25rem 15rem 25rem;
    grid-template-rows: 10rem 10rem;
    grid-auto-rows: minmax (30rem, auto);
}

Comme vous l'avez peut-être deviné, minmax () nous permet de définir la taille minimale et maximale d'une piste. Il nécessite deux arguments, le premier étant la taille de piste minimale souhaitée. Le deuxième argument est la taille maximale souhaitée.

Dans ce cas, notre rangée aura au moins 30rems haute. Mais comme nous avons défini notre taille maximale sur auto notre piste s’étendra pour prendre en charge le contenu de cette cellule. Les arguments pour minmax () peuvent être des longueurs ou des pourcentages, ou bien l'un des auto min-contenu et max-contenu . . Ici, minmax (30rem, max-content) aurait sensiblement le même effet. Les unités flexibles, décrites dans la section suivante, sont également valides.

Vous pouvez utiliser des longueurs et des pourcentages pour définir la taille des pistes. Leur utilisation peut signifier que les éléments de la grille ne remplissent pas toute la largeur ou la hauteur du conteneur. Par exemple, si notre conteneur de grille a 70rem de large, colonnes-modèle-grille: 25rem 15rem 25rem; ne remplira qu'environ 90% de son espace horizontal. Par ailleurs, si notre conteneur de grille ne fait que 50rem de large, la largeur totale de nos colonnes dépassera les limites du conteneur.

Un moyen d'éviter ce problème est d'utiliser la longueur flexible [1945915]. unités.

Création de grilles flexibles avec des unités flexibles

Longueur flexible ou flex les unités sont mieux comprises comme des unités fractionnaires et sont exprimées en utilisant fr . ]. Les unités Flex indiquent au navigateur quelle fraction ou proportion de l'espace restant dans un conteneur de grille doit être alloué à chaque élément de la grille. px em ou cm sont.

Il existe une formule pour calculer l'utilisé. largeur d'un élément lors de l'utilisation d'unités flexibles: (flex × espace restant) & div; somme de tous les facteurs de flexion . Si, par exemple, notre conteneur de grille a une largeur de 1000px et que la valeur de de colonnes de modèle de grille est de 3fr 2fr 1fr nos colonnes seront de ] 500px 333.33px et 133.33px de large. La largeur de chaque colonne est allouée proportionnellement à l'espace disponible, comme indiqué ci-dessous.

Les unités de longueur flexibles conservent les proportions de la grille, plutôt que les longueurs absolues

les unités sont des rapports et non des longueurs absolues, grille-modèle-colonnes: 2fr 2fr 2fr équivaut à grille-modèle-colonnes: 1fr 1fr 1fr . Dans les deux cas, les colonnes auront la même largeur pour les modes d'écriture horizontaux et les rangées d'égale hauteur pour les modes d'écriture verticaux.

Note: fr Les unités ne sont pas des valeurs de longueur vraies. Cela les rend incompatibles avec d'autres unités de longueur, telles que px et rem et les pourcentages de largeur. Cela signifie également que vous ne pouvez pas utiliser les unités fr avec la fonction calc () . Par exemple, calc (1fr - 1rem) est une valeur de longueur non valide.

Utilisation du modèle de grille Shorthand Property

Nous pouvons également indiquer le nombre de lignes et de colonnes. en utilisant la propriété grid-template . Sa syntaxe est la suivante:

 grid-template: [row track list] /

Considérons ce bloc de CSS:

 .grid {
    affichage: grille;
    Grille-modèle-colonnes: 25rem 25rem 25rem;
    grid-template-rows: 10rem 10rem;
}

Nous pouvons combiner les deuxième et troisième lignes à l'aide de gabarit de grille :

. Grid {
    affichage: grille;
    modèle de grille: 10rem 10rem / 25rem 25rem 25rem;
}

Par souci de clarté, vous souhaiterez peut-être quand même utiliser les propriétés de type main longue.

Répétition de lignes et de colonnes

Dans de nombreux cas, vous aurez besoin de colonnes de grille ou de lignes qui se répètent automatiquement. penser à une liste d’articles du magasin ou à des résultats de recherche de recettes. Grid propose une syntaxe pour cela: la fonction repeat () :

 .grid {
    affichage: grille;
    Grille-modèle-colonnes: répéter (3, 1fr);
}

repeat () accepte deux arguments:

1. le nombre de répétitions de la liste de pistes
2. une liste de pistes à répéter

Les arguments doivent être séparés par une virgule. Le premier argument peut être un entier positif ou les mots-clés auto-ajustement ou à remplissage automatique . Le CSS ci-dessus produit la grille suivante. Notre liste de pistes 1fr est répétée trois fois.

Une grille répétitive avec des unités fr

Nous pourrions également utiliser une colonne à deux colonnes. motif qui se répète deux fois. Par exemple, grid-template-columns: repeat (2, 1fr 3fr); produit une grille à quatre colonnes. Comme le montre l'image ci-dessous, les première et troisième colonnes ont un tiers de la largeur des deuxième et quatrième. Dans les deux cas, la valeur de grid-template-rows est de auto .

Un motif de grille répétitif à deux colonnes

Colonnes répétitives avec auto-ajustement ou remplissage automatique

Les deux exemples précédents indiquent au navigateur: voici un modèle de liste de pistes; veuillez le répéter X fois (19459006). Cependant, ce que vous voudrez peut-être dire au navigateur est: veuillez insérer autant de colonnes ou de lignes que vous le pouvez dans ce conteneur de grille . Pour cela, nous pouvons utiliser auto-ajustement ou remplissage automatique comme premier argument pour repeat () en combinaison avec minmax () .

Quelle est la différence entre auto-ajustement et remplissage automatique ? C'est subtile, mais significatif.

• remplissage automatique s'adapte à autant d'éléments de grille que possible dans une ligne de tracé, ajout de pistes de grille anonymes si nécessaire.
• ajustement automatique s'adapte à autant d'éléments de grille que possible dans une ligne de piste, agrandissant ou réduisant éventuellement les dimensions de chaque piste si nécessaire.

Cette différence devient évidente lorsque la largeur du conteneur de grille dépasse la largeur totale maximale. de ses éléments de la grille. Comparons quelques CSS:

 .grid {
    affichage: grille;
    largeur: 800px;
}
.autofill {
    grid-template-columns: repeat (remplissage automatique, minmax (100px, 1fr));
}
.autofit {
    grid-template-columns: repeat (ajustement automatique, minmax (100px, 1fr));
}

Et appliquons ce code CSS au code HTML ci-dessous:

    
 Élément de grille A 
    
 Élément de grille B 
    
 Élément de grille C 
    
 Élément de grille D 
    
 Élément de grille E 



    
 Élément de grille A [



    
 19659023] Élément de grille B 
    
 Élément de grille C 
    
 Élément de grille D 
    
 Élément de grille E 

La seule différence entre ces deux configurations de grille est que l'une utilise le remplissage automatique et l'autre utilise l'auto-ajustement . Mais comparez les deux grilles dans l'image ci-dessous:

Comparaison du remplissage automatique avec le réglage automatique

Dans les deux grilles , la largeur maximale totale des éléments de la grille est inférieure à celle du conteneur de la grille. Cependant, dans la grille du haut, notre grille Remplissage automatique cet espace excédentaire est rempli par des éléments de grille anonymes.

Visualisation de la différence entre le remplissage automatique et l'ajustement automatique avec l'inspecteur de grille de Firefox

Comparez-le à la grille du bas, dans laquelle chaque grille l'élément a été étiré pour s'adapter à l'espace disponible. L'image ci-dessus illustre l'apparence de ces cellules de grille anonymes à l'aide des outils de développement de Firefox.

Remarque: si cela n'a toujours aucun sens, lisez le texte de Sara Soueidan intitulé « Colonnes à redimensionnement automatique dans CSS Grid: remplissage automatique vs ajustement automatique ”. Il contient des exemples vidéo illustrant un peu mieux la différence par rapport aux images statiques.

Il s'agit d'un extrait du livre CSS Master, 2e édition . Jusqu'à présent, nous avons couvert des grilles simples parfaitement alignées en rangées et en colonnes. Le livre poursuit en expliquant les dispositions beaucoup plus complexes que Grid peut gérer, couvrant le placement de grille basé sur les lignes, les zones de grille nommées, la manière d'espacer les éléments de la grille et le traitement des images dans les grilles.

Conclusion

CSS Grid is a sujet très dense. Nous venons vraiment de gratter la surface ici. Heureusement, il existe une multitude de ressources qui peuvent vous aider à en apprendre davantage.

Je crois en la lecture des spécifications lorsque cela est possible. À mon avis, la spécification de la grille CSS est assez lisible et constitue un bon point de départ pour commencer vos propres explorations de la disposition de la grille. Mais les spécifications ont tendance à contenir beaucoup de jargon, car elles s'adressent non seulement aux développeurs Web, mais également à ceux chargés de les implémenter dans les navigateurs.

La grille de Rachel Andrew par exemple a été créée pour un public de développeurs web. Le site comprend des didacticiels sur la mise en grille et une collection de modèles d'interface utilisateur courants. Assurez-vous également de visiter la section du site des Ressources du site. C’est une profusion de liens qui démontrent ce que vous pouvez faire avec CSS Grid.

Jen Simmons ’ Experimental Layout Lab regorge également d’exemples qui illustrent les possibilités de Grid. Si vous préférez la vidéo, la chaîne YouTube de Layout Land de Simmons comprend des explications vidéo sur la grille et d'autres sujets de mise en page.

Lorsque vous avez besoin de plus d'une référence de style feuille de calcul, essayez “ Guide to Grid ”, par CSS-Tricks.

Tiffany B. Brown est un développeur web et un rédacteur technique indépendant basé à Los Angeles. Brown offre des services de développement Web et de consultation aux grandes agences et aux petites entreprises. Ancien membre de l'équipe des relations avec les développeurs d'Opera Software, Brown est également co-auteur du livre JumpTart HTML5 de SitePoint. Elle écrit sporadiquement sur la technologie de développement Web sur son blog . Vous pouvez la suivre sur Twitter à l'adresse @webinista .