CSS Grid – la Structure de Grille

Le Conteneur de Grille: Définition de la Structure de Grille

La structure de la grille, comme le nombre de lignes et de colonnes qu’elle possède et leur dimensionnement, est contrôlée par les propriétés appliquées au conteneur de grille. Le placement des éléments de la grille est déterminé par les propriétés CSS appliquées aux éléments enfants dans le conteneur de la grille.

Un conteneur de grille est défini en définissant l’affichage en grille ou en ligne sur un élément. Cela crée un contexte de mise en forme de grille pour son contenu, qui sont définis dans une grille. Le contexte de mise en forme de la grille s’applique uniquement aux éléments enfants et ne s’étend pas aux éléments du petit-enfant et au-delà.

Dans le schéma ci-dessous, nous avons appliqué l’affichage: grille sur l’élément du corps, ce qui entraîne les 4 éléments enfants, l’en-tête, le principal, le côté et le pied de page, devenant des éléments de la grille. Cependant, le contenu de l’élément principal n’est pas des éléments de la grille.

Grille explicite et Grille implicite

La grille explicite est ce que nous définissons en utilisant les propriétés de la grille CSS pertinentes, comme les grilles-gabarits, les grilles-modèles-colonnes et les grilles-modèles-zones. Mais disons que vous avez spécifié une grille avec 2 lignes et 3 colonnes, puis placé un élément en dehors de cette grille. Le navigateur créera une grille implicite pour contenir cet élément.

.grid-container {
  display: grid;
  grid-template-columns: 150px 150px 150px; /* three columns  */
  grid-template-rows: 150px 150px; /* two rows  */
}
.item {
  grid-column: 5 / 6; /* grid-column-start: 5; grid-column-end: 6;  */
  grid-row:  2 / 3; /* grid-row-start: 2; grid-row-end: 3;  */
}

Dans une simple grille 3 × 2, les lignes de la colonne de la grille ne dépassent pas 4. Mais si nous plaçons un élément dans la 5ème colonne, le navigateur ajoutera 2 colonnes implicites (montrées par les lignes pointillées bleues sur la grille) pour tenir compte de cet article.

La taille de ces pistes de grille implicites peut être spécifiée avec les propriétés de la grille-auto-colonnes et de la grille-lignes automatiques. Si ces propriétés ne sont pas définies, leur valeur par défaut est automatique, ce qui donne lieu à des colonnes implicites remplissant l’espace disponible également. Pour les lignes implicites qui n’ont pas de contenu, elles auront une hauteur de 0, qui est identique à celle de déclarer un élément div divisé.

Une chose intéressante à propos des pistes de grille implicites est que, une fois qu’ils sont créés, les éléments de la grille qui ne sont pas explicitement placés se complètent en conséquence. Disons que nous avons un conteneur de grille avec 10 éléments enfants et que la grille est configurée de la manière suivante:

.grid-container {
  display: grid;
  grid-template-columns: 150px 150px 150px; /* three columns  */
  grid-template-rows: 150px 150px; /* two rows  */
}
.item {
  grid-column: 5 / 6; /* grid-column-start: 5; grid-column-end: 6;  */
  grid-row:  2 / 3; /* grid-row-start: 2; grid-row-end: 3;  */
}

En plaçant un élément de grille à la ligne de grille 8, le navigateur génère 6 colonnes de grilles implicites supplémentaires en fonction des valeurs définies sur la propriété grid-auto-columns. Les éléments qui ne sont pas explicitement placés puis remplissent les pistes implicites en conséquence.

grid-template-columns: none | <track-list> | <auto-track-list>
grid-template-rows: none | <track-list> | <auto-track-list>

[ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?

repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )

grid-template-columns: 30px 100px 30px 100px 30px 100px 30px 100px;
/* same as above but with the repeat() function */
grid-template-columns: repeat(4, 30px 100px);

grid-template-columns: [first sidebar-start] 250px [content-start] 1fr [last];
grid-template-rows: [first header-start] 100px [content-start] 1fr [footer-start] 
                     100px [last];

[ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat>

repeat( [ <positive-integer> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

grid-template-areas: none | <string>+

.grid-container {
  display: grid;
  grid-template-areas: "logo stats"
                       "score stats"
                       "board board"
                       "... controls";
}

Nous pouvons ensuite attribuer des éléments de grille à ces zones nommées définies de la façon suivante:

.logo { grid-area: logo; }
.score { grid-area: score; }
.stats { grid-area: stats; }
.board { grid-area: board; }
.controls { grid-area: controls; }

La propriété de grid-template

grid-template: none | [ <‘grid-template-rows’> / <‘grid-template-columns’> ] | 
                      [ <line-names>? <string> <track-size>? <line-names>? ]+ 
                      [ / <explicit-track-list> ]?

Il s’agit d’une sténographie pour définir <‘grid-template-columns’>, <‘grid-template-rows’> et <‘grid-template-areas’> dans une seule déclaration.

Les valeurs possibles et les formes de syntaxe ont les significations suivantes:

none

Ceci définit les 3 propriétés à leurs valeurs initiales (aucune valeur)

<‘grid-template-rows’> / <‘grid-template-columns’>

Cela définit <grid-template-rows ‘> et <‘ grid-template-columns ‘> sur les valeurs spécifiées, tandis que <‘ grid-template-areas> est défini sur none. Notez que l’ordre de la syntaxe est important, où la première valeur est pour <‘grid-template-rows’> et la seconde valeur est pour <‘grid-template-columns’>.

[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?

Cela définit <‘grid-template-areas’> sur les strings listés. Le <‘grid-template-rows’> sera défini sur la <track-size> s qui vient après chaque string. Les lignes de la grille seront également nommées en fonction des noms de lignes en sandwich de chaque string. La <‘grille-modèle-colonnes’> sera définie sur la liste de piste spécifiée après la barre oblique. Si rien n’est spécifié après la barre oblique, il n’y aura aucune valeur dans ce cas.

grid-template: [header-top] "a a a" [header-bottom] [main-top] "b b b" 1fr 
[main-bottom] / auto 1fr auto;

Ce qui est l’équivalent de:

grid-template-areas: "a a a"
                     "b b b";
grid-template-rows: [header-top] auto [header-bottom main-top] 1fr [main-bottom];
grid-template-columns: auto 1fr auto;

? ? ? ]+ [ / ]?” width=”809″ height=”389″>

Les propriétés grid-column-gap et grid-row-gap

grid-column-gap: <length> | <percentage>
grid-row-gap: <length> | <percentage>

Ces propriétés spécifient la taille de la gouttière entre les colonnes de la grille et les lignes de la grille, respectivement. Les gouttières n’apparaissent pas sur les bords de la grille, ce qui signifie qu’il n’y a pas de gouttière avant la première piste ou après la dernière piste.
Les valeurs possibles ont les significations suivantes:

<length-percentage>

Peut être n’importe quelle longueur CSS ou un pourcentage de la largeur du conteneur parental.

La propriété grid-gap

grid-gap: <‘grid-row-gap’> <‘grid-column-gap’>?

Il s’agit d’un raccourci pour définir <‘grid-row-gap’> et <‘grid-column-gap’> dans une seule déclaration. La première valeur définit <‘grid-row-gap ‘> et la seconde valeur définit <‘ grid-column-gap ‘>. Si <‘grid-column-gap ‘> n’est pas présent, cela prendra la même valeur que <‘ grid-row-gap ‘>. Les valeurs possibles ont les significations suivantes:

<‘grid-row-gap’>

Peut être n’importe quelle longueur CSS ou un pourcentage de la largeur du conteneur du parent.

<‘grid-column-gap’>

Peut être n’importe quelle longueur CSS ou un pourcentage de la largeur du conteneur du parent.

Les propriétés grid-auto-columns et grid-auto-rows

grid-auto-columns: <track-size>+
grid-auto-rows: <track-size>+

Lorsqu’un élément de grille est placé dans une colonne ou une ligne qui n’a pas été définie par <grid-template-columns ‘> ou <‘ grid-template-rows ‘>, des pistes implicites de grille sont créées pour contenir ces éléments. Nous pouvons contrôler la taille de ces pistes de grille implicites avec les propriétés <‘grid-auto-columns’> et <‘grid-auto-rows’>. Nous pouvons également spécifier plusieurs pistes pour ces pistes de grille implicites. Les valeurs possibles ont les significations suivantes:

<track-size>+

Peut-être des valeurs acceptables pour <track-size>. Chaque ensemble de <track-size> s peut être répété comme une liste séparée par espace.

.grid {
  display: grid;
  grid-template-columns: 150px 150px;
  grid-auto-columns: 50px 100px;
}
.item {
  grid-column: 8;
}

+” width=”810″ height=”313″>

La propriété grid-auto-flow

grid-auto-flow: [ row | column ] | dense

Cette propriété nous permet d’ajuster la façon dont le placement automatique des éléments de grille fonctionne lorsqu’ils ne sont pas correctement positionnés avec des propriétés de grille. Les valeurs possibles ont les significations suivantes:

row

C’est la valeur initiale. L’algorithme de placement automatique place les éléments de la grille en remplissant chaque ligne et en ajoutant de nouvelles lignes au besoin.

column

L’algorithme de placement automatique placera les éléments de la grille en remplissant chaque colonne et en ajoutant de nouvelles colonnes au besoin.

dense

Cela contrôle la façon dont les éléments de la grille sont étroitement liés. Si spécifié, l’algorithme tentera d’adapter des éléments de grille plus petits qui apparaissent plus tard dans l’ordre source plus tôt dans la grille. Cela réduira l’incidence des «trous» dans la grille.
Si ce n’est pas spécifié, le navigateur sera par défaut à l’algorithme “sparse“, qui ne remplit que la grille dans l’ordre, ne jamais effectuer de back-tracking. Cela peut entraîner des «trous» dans la grille, où les éléments de grille ne correspondent pas à certaines zones de grille.

La propriété grid

grid: <‘grid-template’> | <‘grid-template-rows’> / [ auto-flow && dense? ] 
      <‘grid-auto-columns’>? | [ auto-flow && dense? ] <‘grid-auto-rows’>? / 
      <‘grid-template-columns’>

Il s’agit d’un raccourci qui définit toutes les propriétés de la grille explicite et toutes les propriétés implicites de la grille dans une seule déclaration. Il réinitialise également les propriétés de gouttière définies plus tôt dans la cascade. Cela aura une incidence sur les 8 sous-propriétés suivantes:

/* Initial values of each sub-property */
grid-template-rows: none
grid-template-columns: none
grid-template-areas: none
grid-auto-rows: auto
grid-auto-columns: auto
grid-auto-flow: row
grid-column-gap: 0
grid-row-gap: 0

Les valeurs possibles et les formes de syntaxe ont les significations suivantes:

<‘grid-template’>

Reportez-vous à la syntaxe de <‘grid-template’>

<‘grid-template-rows’> / [ auto-flow && dense? ] <‘grid-auto-columns’>?

Utilisé pour définir explicitement les pistes de ligne de grille, tout en spécifiant comment configurer le comportement de répétition automatique pour les pistes de colonne de grille. Toutes les autres sous-propriétés de grille, par exemple, les propriétés de gouttière, sont réinitialisées à leurs valeurs initiales. Nous ne pouvons pas définir des lignes automatiques de grille à l’aide de cette forme de syntaxe; Il sera réglé sur auto.

.grid {
  grid: 50px 75px / auto-flow;
}
/* is equivalent to */
.grid {
  grid-template-rows: 50px 75px;
  grid-template-columns: none; /* cannot be set explicitly with this syntax form */
  grid-template-areas: none; /* cannot be set explicitly with this syntax form */
  grid-auto-rows: auto; /* cannot be set explicitly with this syntax form */
  grid-auto-columns: auto;
  grid-auto-flow: column; /* can only set dense or not */
  grid-column-gap: 0; /* cannot be set explicitly with this syntax form */
  grid-row-gap: 0; /* cannot be set explicitly with this syntax form */
}

[ auto-flow && dense? ] <‘grid-auto-rows’>? / <‘grid-template-columns’>

Utilisé pour définir explicitement les pistes de la colonne de grille, tout en spécifiant comment configurer le comportement de répétition automatique pour les pistes de ligne de grille. Toutes les autres sous-propriétés de grille, par exemple, les propriétés de gouttière, sont réinitialisées à leurs valeurs initiales. Nous ne pouvons pas configurer des colonnes auto grille utilisant cette forme de syntaxe; Il sera réglé sur auto.

.grid {
  grid: auto-flow dense / 30% 100px;
}
/* is equivalent to */
.grid {
  grid-template-rows: none; /* cannot be set explicitly with this syntax form */
  grid-template-columns: 30% 100px; 
  grid-template-areas: none; /* cannot be set explicitly with this syntax form */
  grid-auto-rows: auto; 
  grid-auto-columns: auto; /* cannot be set explicitly with this syntax form */
  grid-auto-flow: row dense; /* can only set dense or not */
  grid-column-gap: 0; /* cannot be set explicitly with this syntax form */
  grid-row-gap: 0; /* cannot be set explicitly with this syntax form */
}