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

Table Des Matières

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.

Structure de 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.

Grille explicite et Grille implicite

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;  */
}

css gride pratique

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.

Propriétés Liées au Conteneur de Grille

grid-template-columns et grid-template-rows Propriétés

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

Ces 2 propriétés spécifient la taille des pistes de grille et des noms de lignes. La valeur de la propriété est exprimée sous la forme d’une liste séparée par l’espace, connue sous le nom de liste de pistes. La propriété grid-template-columns définit la liste de pistes pour toutes les colonnes de la grille, tandis que la propriété grid-template-rows définit la liste de pistes pour toutes les lignes de la grille. Les noms de lignes sont facultatifs.

Parce que Grid a été conçu pour être très flexible en ce qui concerne la façon dont les développeurs peuvent définir des grilles très personnalisées, il existe de nombreuses options différentes pour définir les valeurs de la grid-template-columns  et grid-template-rows. Les valeurs possibles et les formes de syntaxe ont les significations suivantes:

none

C’est la valeur initiale. Aucune piste de grille explicite n’est créée.

<track-list>

Une liste de valeurs qui spécifient la taille de chaque piste de grille et les noms de ligne de grille, qui sont facultatifs. La syntaxe est la suivante:

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

<track-size>

Il existe trois façons de définir <track-size>

1 – <track-breadth>

  • Peut être une longueur ou un pourcentage CSS, comme 250px ou 20%
  • Peut être une longueur flexible, déclarée à l’aide de l’unité fr, qui prend une part de l’espace libre restant proportionnel à son facteur de flexion. Par exemple, compte tenu d’un récipient de grille de 750px avec 3 colonnes de 150px, 1fr et 2fr respectivement. Les colonnes de taille flexible prendront les 600px restants dans le rapport de 1: 2, donc la deuxième colonne prend 200px et la troisième colonne prend 400px.
    .grid {
      display: grid;
      width: 750px;
      grid-template-columns: 150px 1fr 2fr;
    }

<track-breadth>

  • Peut être le mot-clé min-content, qui est la plus petite taille possible qui ne conduit pas à un débordement.
    .grid {
      display: grid;
      grid-template-columns: min-content max-content auto;
    }

Contenu min et max

2 – Minmax (<inflexible-largeth>, <track-largeth>)
Peut être une gamme telle que définie par la fonction minmax (), où la première valeur est la valeur minimale et la seconde est la valeur maximale. Pour ce cas, la valeur minimale ne peut pas être une longueur flexible, de sorte que vous pouvez utiliser tous les types de valeurs comme <track-breadth> à l’exception des unités flexibles.

3 – Ajustement de contenu:  fit-content<length-percentage> )

<track-repeat>

En ce qui concerne <track-repeat>, cela signifie que nous pouvons répéter <track-size> s. Nous pouvons le faire avec la notation repeat (), qui est une fonction utile qui nous permet de spécifier un grand nombre de colonnes ou de lignes qui suivent un modèle similaire. La syntaxe de <track-repeat> est la suivante:

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

Supposons que nous voulons le modèle d’une colonne étroite de 30px et une colonne 100px de large répété 4 fois. Il existe 2 façons de déclarer cela:

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);

<line-names>

Si vous créez une grille plus compliquée, par exemple, pour mettre en page tout le site Web, il pourrait être utile de nommer les lignes de grille pour rendre le code de grille plus facile à comprendre. Les noms de lignes peuvent être n’importe quelle string sauf ‘span’, qui est un mot-clé. Les lignes de grille peuvent avoir plus d’un nom.

string except ‘span’, which is a keyword. Grid lines can have more than one name.

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];

CSS Grid <line-names>

<auto-track-list>

Une liste de valeurs qui spécifie la taille de chaque piste de grille et les noms de ligne de grille, qui sont facultatifs. La syntaxe est la suivante:

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

<fixed-size>

Il existe trois façons de définir <taille fixe>.

  1. <fixed-breadth>
    Peut-être une longueur CSS ou une valeur en pourcentage.
  2. minmax( <fixed-breadth> , <track-breadth> )
    Peut être une gamme telle que définie par la fonction minmax (), où la première valeur est la valeur minimale et la seconde est la valeur maximale. Pour ce cas, la valeur minimale doit être <fixed-breadth>, tandis que la valeur maximale peut être n’importe quelle valeur autorisée pour <track-breadth>
    minmax( <inflexible-breadth> , <fixed-breadth> )
    Peut être une gamme telle que définie par la fonction minmax (), où la première valeur est la valeur minimale et la seconde est la valeur maximale. Pour ce cas, la valeur minimale ne peut pas être une unité flexible, alors que la valeur maximale doit être <fixed-breadth>.
  3. minmax( <inflexible-breadth> , <fixed-breadth> )                                       Peut être une gamme telle que définie par la fonction minmax (), où la première valeur est la valeur minimale et la seconde est la valeur maximale. Pour ce cas, la valeur minimale ne peut pas être une unité flexible, alors que la valeur maximale doit être  <fixed-breadth>.

<fixed-repeat>

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

En utilisant la notation repeat (), nous pouvons créer une grille où nous pouvons spécifier combien de fois une colonne ou une ligne de grille de taille fixe doit être répétée.

<auto-repeat>

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

En utilisant la notation repeat (), nous pouvons créer une grille où une colonne ou une ligne de grille de taille fixe peut être répétée pour compléter l’espace disponible.

Le mot-clé de remplissage automatique auto-fill générera autant de colonnes que l’espace disponible sans provoquer de débordement de la grille et le mot-clé auto-ajustement (auto-fit) se comporte de manière similaire. La différence est que l’auto-ajustement va effondrer les pistes répétées vides (ce qui signifie que leur taille est de 0px).

La propriété grid-template-area

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

Cette propriété définit les zones de grille nommées et fournit une visualisation de la structure de la grille, ce qui peut aider à rendre le code sous-jacent plus facile à comprendre.

Les valeurs possibles ont les significations suivantes:

none

C’est la valeur initiale. Aucune piste de grille explicite n’est créée et, par conséquent, aucune zone de grille nommée n’est définie.

<string>+

Chaque string distincte crée une ligne tandis que chaque mot dans string crée une colonne. Tous les string doivent avoir le même nombre de mots, sinon la déclaration est invalide. L’utilisation d’une séquence d’un ou plusieurs « . » (U + 002E FULL STOP) représente un jeton de cellules nul, qui est une zone sans nom dans la grille. C’est plus facile à comprendre avec un exemple de code:

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

Ptopriété grid-template-area Property

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;

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

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;
}

CSS Grid <track-size>+

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 */
}

LAISSER UN COMMENTAIRE

Please enter your comment!
Please enter your name here

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.