Partage de technologie

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Tutoriel de mise en page de la grille CSS Grid

I. Aperçu

La disposition en grille (Grid) est la solution de mise en page CSS la plus puissante.

Il divise les pages Web en grilles, et différentes grilles peuvent être combinées arbitrairement pour créer différentes mises en page. Dans le passé, les effets qui ne pouvaient être obtenus que grâce à des frameworks CSS complexes sont désormais intégrés aux navigateurs.

Une mise en page comme celle illustrée ci-dessus est la spécialité de la mise en page Grid.

La disposition en grille présente certaines similitudes avec la disposition Flex, les deux peuvent spécifier la position de plusieurs éléments à l'intérieur du conteneur. Cependant, il existe des différences importantes.

La disposition flexible est une disposition d'axe et ne peut spécifier que la position de "l'élément" par rapport à l'axe, qui peut être considérée commeDisposition unidimensionnelle . La disposition en grille divise le conteneur en « lignes » et « colonnes », génère des cellules, puis spécifie la cellule où se trouve « l'élément », qui peut être considérée commeDisposition 2D . La disposition en grille est bien plus puissante que la disposition Flex.

2. Notions de base

Avant d'apprendre la disposition en grille, vous devez comprendre certains concepts de base.

2.1 Conteneurs et projets

Une zone avec une disposition en grille est appelée un « conteneur ». Les éléments enfants utilisant le positionnement en grille à l'intérieur du conteneur sont appelés « éléments ».

<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>
1
2
3
4
5

Dans le code ci-dessus, le plus externe<div>L'élément est le conteneur, et les trois éléments intérieurs<div>Les éléments sont des objets.

Avis: Le projet ne peut être que l'élément enfant de niveau supérieur du conteneur et n'inclut pas les éléments enfants du projet, tels que le code ci-dessus<p> Les éléments ne sont pas des objets. La disposition en grille ne prend effet que sur les projets.

2.2 Lignes et colonnes

La zone horizontale à l’intérieur du conteneur est appelée « ligne » et la zone verticale est appelée « colonne ».

Dans l'image ci-dessus, les zones sombres horizontales sont des « lignes » et les zones sombres verticales sont des « colonnes ».

2.3 Cellules

La zone d'intersection des lignes et des colonnes est appelée « cellule ».

Dans des circonstances normales,nOK etmles colonnes produirontn x m cellules. Par exemple, 3 lignes et 3 colonnes produiront 9 cellules.

2.4 Lignes de quadrillage

Les lignes qui divisent la grille sont appelées « lignes de grille ». Les lignes de grille horizontales divisent les lignes et les lignes de grille verticales divisent les colonnes.

Dans des circonstances normales,nD'ACCORDn + 1ligne de grille horizontale racine,mInscritm + 1Il y a trois lignes de quadrillage verticales, par exemple, il y a quatre lignes de quadrillage horizontales sur trois rangées.

L'image ci-dessus est une grille 4 x 4 avec un total de 5 lignes de grille horizontales et 5 lignes de grille verticales.

3. Propriétés du conteneur

Les propriétés de la disposition Grille sont divisées en deux catégories. Un type est défini sur le conteneur et est appelé propriétés du conteneur ; l'autre type est défini sur le projet et est appelé propriétés du projet. Cette partie présente d'abord les propriétés du conteneur.

3.1 Attribut d'affichage

display: gridSpécifie un conteneur pour utiliser une disposition en grille.

div {
  display: grid;
}
1
2
3

L'image ci-dessus estdisplay: griddeEffet。

Par défaut, les éléments conteneurs sont des éléments de niveau bloc, mais ils peuvent également être définis comme des éléments en ligne.

div {
  display: inline-grid;
}
1
2
3

Le code ci-dessus précisedivEst un élément en ligne qui utilise une disposition en grille en interne.

L'image ci-dessus estdisplay: inline-griddeEffet。

Notez qu'après avoir défini la disposition en grille, les sous-éléments du conteneur (éléments)float、display: inline-block、display: table-cell、vertical-alignetcolumn-*Tous les autres paramètres seront invalides.

3.2 attribut grille-modèle-colonnes, attribut grille-modèle-lignes

Une fois que le conteneur a spécifié la disposition de la grille, il doit ensuite diviser les lignes et les colonnes.grid-template-columnsLes propriétés définissent la largeur de chaque colonne,grid-template-rowsLa propriété définit la hauteur de chaque ligne.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}
1
2
3
4
5

code ci-dessusSpécifie une grille avec trois lignes et trois colonnes. La largeur de colonne et la hauteur de ligne sont toutes deux.100px。

Au lieu d’utiliser des unités absolues, vous pouvez également utiliser des pourcentages.

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}
1
2
3
4
5

（1）répéter()

Parfois, il est très gênant d’écrire la même valeur à plusieurs reprises, surtout lorsqu’il y a plusieurs grilles.A ce moment, vous pouvez utiliserrepeat() Fonction qui simplifie les valeurs répétées.Le code ci-dessus utiliserepeat()Réécrit comme suit.

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}
1
2
3
4
5

repeat()Accepte deux paramètres, le premier paramètre est le nombre de répétitions (3 dans l'exemple ci-dessus) et le deuxième paramètre est la valeur à répéter.

repeat()C'est normal de répéter un modèle.

grid-template-columns: repeat(2, 100px 20px 80px);
1

code ci-dessus6 colonnes sont définies, la largeur des première et quatrième colonnes est100px, les deuxième et cinquième colonnes20px, la troisième colonne et la sixième colonne80px。

(2) mot-clé de remplissage automatique

Parfois, la taille de la cellule est fixe, mais la taille du conteneur n'est pas définie.Si vous souhaitez que chaque ligne (ou colonne) contienne autant de cellules que possible, vous pouvez utiliserauto-fillLes mots clés représentent la saisie semi-automatique.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}
1
2
3
4

code ci-dessusReprésente la largeur de chaque colonne100px, puis se remplit automatiquement jusqu'à ce que le conteneur ne puisse plus contenir de colonnes.

En dehors deauto-fill, et un mot-cléauto-fit , le comportement des deux est fondamentalement le même.Uniquement lorsque le conteneur est suffisamment large pour accueillir toutes les cellules d'une rangée et que la largeur des cellules n'est pas fixedifférences de comportement：auto-fillLa largeur restante sera remplie de cellules vides.auto-fitva essayer d’élargir la largeur de la cellule.

(3) mot-clé fr

Afin d'exprimer facilement les relations proportionnelles, la disposition en grille fournitfr Mot-clé (abréviation de fraction, signifiant « fragment »).Si les largeurs des deux colonnes sont1fret2fr, ce qui signifie que ce dernier est le double du premier.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
1
2
3
4

code ci-dessusReprésente deux colonnes de même largeur.

frPeut être utilisé conjointement avec des unités de longueur absolue, ce qui est très pratique.

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
}
1
2
3
4

code ci-dessussignifie que la première colonne a une largeur de 150 pixels et que la deuxième colonne est deux fois moins large que la troisième colonne.

(4)minmax()

minmax() La fonction produit une plage de longueurs, indiquant que la longueur se situe dans cette plage. Il accepte deux paramètres, la valeur minimale et la valeur maximale.

grid-template-columns: 1fr 1fr minmax(100px, 1fr);
1

Dans le code ci-dessus,minmax(100px, 1fr)Indique que la largeur de la colonne n'est pas inférieure à100px, pas plus grand que1fr。

(5) mot-clé automatique

autoLa longueur de représentation des mots clés est déterminée par le navigateur lui-même.

grid-template-columns: 100px auto 100px;
1

Dans le code ci-dessus, la largeur de la deuxième colonne est fondamentalement égale à la largeur maximale de la cellule de la colonne, à moins que le contenu de la cellule ne soit défini.min-width, et cette valeur est supérieure à la largeur maximale.

(6) Nom des lignes du quadrillage

grid-template-columnsattributs etgrid-template-rowsDans les propriétés, vous pouvez également utiliser des crochets pour spécifier le nom de chaque ligne de grille afin de pouvoir vous y référer facilement ultérieurement.

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
1
2
3
4
5

Le code ci-dessus spécifie une disposition de grille de 3 lignes x 3 colonnes, il y a donc 4 lignes de grille verticales et 4 lignes de grille horizontales. À l’intérieur des crochets se trouvent les noms des huit lignes.

La disposition en grille autorise plusieurs noms pour la même ligne, tels que[fifth-line row-5]。

(7) Exemple de mise en page

grid-template-columns Les propriétés sont très utiles pour la mise en page des pages Web. La mise en page à deux colonnes ne nécessite qu'une seule ligne de code.

.wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
}
1
2
3
4

Le code ci-dessus définit la colonne de gauche à 70 % et la colonne de droite à 30 %.

La disposition traditionnelle en douze grilles est également facile à écrire.

grid-template-columns: repeat(12, 1fr);
1

3.3 attribut grille-ligne-gap, attribut grille-colonne-gap, attribut grille-gap

grid-row-gapLa propriété définit l'espacement entre les lignes (espacement des lignes),grid-column-gapLa propriété définit l'espacement entre les colonnes (espacement des colonnes).

.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}
1
2
3
4

code ci-dessusmilieu,grid-row-gapUtilisé pour définir l'espacement des lignes,grid-column-gapUtilisé pour définir l'espacement des colonnes.

grid-gapLes propriétés sontgrid-column-gapetgrid-row-gapForme abrégée combinée de , la syntaxe est la suivante.

grid-gap: <grid-row-gap> <grid-column-gap>;
1

Par conséquent, le morceau de code CSS ci-dessus est équivalent au code suivant.

.container {
  grid-gap: 20px 20px;
}
1
2
3

sigrid-gapLa deuxième valeur est omise et le navigateur considère la deuxième valeur comme égale à la première valeur.

Selon les dernières normes, les trois noms d'attributs ci-dessusgrid-Le préfixe a été supprimé,grid-column-gapetgrid-row-gapécrit commecolumn-gapetrow-gap，grid-gapécrit commegap。

3.4 Propriété de zones de modèle de grille

La disposition en grille vous permet de spécifier des « zones » composées d'une ou de plusieurs cellules.grid-template-areasLes propriétés sont utilisées pour définir des zones.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas:
    'a b c'
    'd e f'
    'g h i';
}
1
2
3
4
5
6
7
8
9

Le code ci-dessus divise d'abord 9 cellules puis les nommeaarriveriLes neuf zones correspondent respectivement à ces neuf cellules.

La méthode d'écriture pour fusionner plusieurs cellules en une seule zone est la suivante.

grid-template-areas:
  'a a a'
  'b b b'
  'c c c';
1
2
3
4

Le code ci-dessus divise 9 cellules ena、b、ctrois domaines.

Vous trouverez ci-dessous un exemple de mise en page.

grid-template-areas:
  'header header header'
  'main main sidebar'
  'footer footer footer';
1
2
3
4

Dans le code ci-dessus, le haut est la zone d'en-têteheader, le bas est la zone de pied de pagefooter, la partie médiane estmainetsidebar。

Si certaines zones ne nécessitent pas d'être exploitées, utilisez des "points" (.)exprimer.

grid-template-areas:
  'a . c'
  'd . f'
  'g . i';
1
2
3
4

Dans le code ci-dessus, la colonne du milieu est un point, ce qui signifie que la cellule n'est pas utilisée ou qu'elle n'appartient à aucune zone.

Notez que le nom des régions affecte les lignes de la grille.La ligne de départ de chaque zone est automatiquement nommée区域名-start, la ligne de quadrillage terminée est automatiquement nommée区域名-end。

Par exemple, la zone est nomméeheader, alors les lignes de quadrillage horizontales et les lignes de quadrillage verticales à la position de départ sont appeléesheader-start, les lignes de quadrillage horizontales et les lignes de quadrillage verticales à la position finale sont appeléesheader-end。

3.5 Attribut grille-auto-flow

Une fois la grille divisée, les éléments enfants du conteneur seront automatiquement placés dans chaque grille dans l'ordre. L'ordre de placement par défaut est « ligne d'abord, colonne ensuite », c'est-à-dire que vous remplissez d'abord la première ligne, puis commencez à placer la deuxième ligne, qui est l'ordre des nombres dans la figure ci-dessous.

Cet ordre est donné pargrid-auto-flowDéterminée par l'attribut, la valeur par défaut estrow , c'est-à-dire "ligne d'abord, puis ligne".Vous pouvez également le définir surcolumn, devient "ligne d'abord, puis ligne".

grid-auto-flow: column;
1

code ci-dessusdéjà configurécolumnÀ partir de maintenant, l’ordre de placement deviendra celui indiqué ci-dessous.

grid-auto-flowEn plus de définir l'attribut surrowetcolumn, peut également être réglé surrow denseetcolumn dense . Ces deux valeurs sont principalement utilisées pour placer automatiquement les éléments restants une fois que certains éléments se sont vu attribuer des positions.

Exemple ci-dessousLaissez le projet n°1 et le projet n°2 occuper chacun deux cellules, puis dans la valeur par défautgrid-auto-flow: rowDans ce cas, la mise en page suivante sera réalisée.

Dans l'image ci-dessus, la position derrière l'élément n°1 est vide. En effet, l'élément n°3 suit l'élément n°2 par défaut, il sera donc classé derrière l'élément n°2.

Modifiez maintenant les paramètres et réglez-le surrow dense, signifie « ligne en premier, colonne en second », et remplissez-le aussi étroitement que possible, sans espaces.

grid-auto-flow: row dense;
1

code ci-dessusL'effet est le suivant.

L'image ci-dessus remplira d'abord la première ligne, puis la deuxième ligne, donc l'élément 3 suivra l'élément 1. Les articles n°8 et n°9 seront placés au quatrième rang.

Si vous modifiez le paramètre encolumn dense, signifie "colonne d'abord, puis ligne", et remplissez les espaces autant que possible.

grid-auto-flow: column dense;
1

code ci-dessusL'effet est le suivant.

L'image ci-dessus remplira d'abord la première colonne, puis la deuxième colonne, donc l'élément n° 3 est dans la première colonne et l'élément n° 4 est dans la deuxième colonne. Les points 8 et 9 ont été regroupés dans la quatrième colonne.

3.6 Attributs submit-items, attribut align-items, attribut place-items

justify-itemsLa propriété définit la position horizontale du contenu de la cellule (gauche, centre, droite),align-itemsLa propriété définit la position verticale (haut, milieu, bas) du contenu de la cellule.

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}
1
2
3
4

Ces deux attributs s'écrivent exactement de la même manière et peuvent prendre les valeurs suivantes.

• start : alignez le bord de départ de la cellule.
• end : aligner sur le bord final de la cellule.
• center : Centre à l’intérieur de la cellule.
• stretch : étirer pour occuper toute la largeur de la cellule (valeur par défaut).

.container {
  justify-items: start;
}
1
2
3

code ci-dessusIndique que le contenu de la cellule est aligné à gauche et que l'effet est tel qu'illustré ci-dessous.

.container {
  align-items: start;
}
1
2
3

code ci-dessusIndique que le contenu de la cellule est aligné en tête et l'effet est comme indiqué ci-dessous.

place-itemsLes propriétés sontalign-itemsattributs etjustify-itemsForme abrégée combinée de la propriété.

place-items: <align-items> <justify-items>;
1

Ci-dessous un exemple.

place-items: start end;
1

Si la deuxième valeur est omise, le navigateur la considère comme égale à la première valeur.

3.7 Attributs justifier-contenu, attribut align-content, attribut place-content

justify-contentL'attribut est la position horizontale de toute la zone de contenu à l'intérieur du conteneur (gauche, centre, droite),align-contentL'attribut est la position verticale de toute la zone de contenu (haut, milieu, bas).

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
1
2
3
4

Ces deux attributs s'écrivent exactement de la même manière et peuvent prendre les valeurs suivantes. (Les images ci-dessous sont toutes basées surjustify-contentPar exemple, les propriétésalign-content Le diagramme d'attributs est exactement le même, sauf que l'orientation horizontale est remplacée par l'orientation verticale. )

• start - la bordure de départ du conteneur aligné.
  
• end - aligne la bordure de fin du conteneur.
  
• center - Centrez le conteneur à l'intérieur.
  
• stretch - Lorsque la taille de l'élément n'est pas spécifiée, étirez-le pour occuper tout le conteneur de grille.
  
• espace autour - espace égal des deux côtés de chaque élément. Par conséquent, l’espace entre les éléments est deux fois plus grand que l’espace entre les éléments et la bordure du conteneur.
  
• space-between - Il y a un espace égal entre les éléments et aucun espace entre les éléments et la bordure du conteneur.
  
• space-evenly - L'espace entre les éléments est égal et l'espace entre les éléments et la bordure du conteneur est de même longueur.
  
  place-contentLes propriétés sontalign-contentattributs etjustify-contentForme abrégée combinée de la propriété.

place-content: <align-content> <justify-content>;
1

Ci-dessous un exemple.

place-content: space-around space-evenly;
1

Si vous omettez la deuxième valeur, le navigateur suppose que la deuxième valeur est égale à la première valeur.

3.8 Propriété grille-auto-colonnes, propriété grille-auto-lignes

Parfois, certains éléments se voient attribuer des positions en dehors de la grille existante. Par exemple, la grille ne comporte que 3 colonnes, mais un certain élément est spécifié dans la 5ème ligne. À ce stade, le navigateur générera automatiquement des grilles supplémentaires pour faciliter le placement des éléments.

grid-auto-columnsattributs etgrid-auto-rows Les propriétés sont utilisées pour définir la largeur des colonnes et la hauteur des lignes de la grille redondante créée automatiquement par le navigateur.Ils sont écrits de la même manière quegrid-template-columnsetgrid-template-rows Exactement le même. Si ces deux propriétés ne sont pas spécifiées, le navigateur détermine la largeur de colonne et la hauteur de ligne de la nouvelle grille entièrement en fonction de la taille du contenu de la cellule.

Exemple ci-dessousÀ l'intérieur, la grille divisée est de 3 lignes x 3 colonnes, mais l'élément n° 8 est spécifié dans la 4ème ligne et l'élément n° 9 est spécifié dans la 5ème ligne.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-rows: 50px;
}
1
2
3
4
5
6

Le code ci-dessus spécifie que la nouvelle hauteur de ligne est uniformément de 50 px (la hauteur de ligne d'origine est de 100 px).

3.9 Attribut de modèle de grille, attribut de grille

grid-templateLes propriétés sontgrid-template-columns、grid-template-rowsetgrid-template-areasForme abrégée combinée de ces trois propriétés.

gridLes propriétés sontgrid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flowL'abréviation combinée de ces six propriétés.

Du point de vue de la facilité de lecture et d’écriture, il est recommandé de ne pas fusionner les attributs, ces deux attributs ne seront donc pas présentés en détail ici.

4. Attributs du projet

Les propriétés suivantes sont définies sur le projet.

4.1 Propriété Grid-Column-Start, propriété Grid-Column-End, propriété Grid-row-Start, propriété Grid-ROW-End

La position du projet peut être spécifiée. La méthode spécifique consiste à spécifier les quatre bordures du projet et quelles lignes de grille sont positionnées respectivement.

• grid-column-startPropriétés : Lignes de quadrillage verticales où se trouve la bordure gauche
• grid-column-endPropriété : La ligne de quadrillage verticale où se trouve la bordure droite
• grid-row-startPropriétés : la ligne de grille horizontale où se trouve la bordure supérieure
• grid-row-endPropriétés : la ligne de grille horizontale où se trouve la bordure inférieure

.item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
}
1
2
3
4

code ci-dessusSpécifie que la bordure gauche de l'élément 1 est la deuxième ligne de grille verticale et que la bordure droite est la quatrième ligne de grille verticale.

Dans l'image ci-dessus, seules les bordures gauche et droite de l'élément n° 1 sont spécifiées, et les bordures supérieure et inférieure ne sont pas spécifiées, donc la position par défaut sera utilisée, c'est-à-dire que la bordure supérieure est la première ligne de grille horizontale, et la bordure inférieure est la deuxième ligne de grille horizontale.

À l'exception de l'élément n° 1, les autres éléments n'ont pas de position spécifiée et sont automatiquement disposés par le navigateur. À ce stade, leurs positions sont déterminées par celle du conteneur.grid-auto-flowDéterminée par l'attribut, la valeur par défaut de cet attribut estrow , ils seront donc disposés "en ligne d'abord, puis en colonne".Les lecteurs peuvent modifier la valeur de cet attribut encolumn、row denseetcolumn dense, pour voir comment les positions des autres éléments ont changé.

Exemple ci-dessousC'est l'effet de spécifier les positions de quatre frontières.

.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}
1
2
3
4
5
6

Les valeurs de ces quatre attributs, en plus d'être spécifiées comme numéro de ligne de grille, peuvent également être spécifiées comme nom de ligne de grille.

.item-1 {
  grid-column-start: header-start;
  grid-column-end: header-end;
}
1
2
3
4

Dans le code ci-dessus, les positions des bordures gauche et droite sont spécifiées comme noms des lignes de grille.

Les valeurs de ces quatre attributs peuvent également être utiliséesspanMot clé indiquant « étendue », c'est-à-dire le nombre de grilles s'étendant entre les bordures gauche et droite (bordures supérieure et inférieure).

.item-1 {
  grid-column-start: span 2;
}
1
2
3

code ci-dessusIndique que la bordure gauche de l'élément n° 1 s'étend sur 2 grilles à partir de la bordure droite.

Ceci est lié àcode ci-dessousL'effet est exactement le même.

.item-1 {
  grid-column-end: span 2;
}
1
2
3

En utilisant ces quatre attributs, s'il y a un chevauchement d'éléments, utilisezz-indexLa propriété spécifie l'ordre de chevauchement des éléments.

4.2 attribut de colonne de grille, attribut de ligne de grille

grid-columnLes propriétés sontgrid-column-startetgrid-column-endLa forme abrégée combinée degrid-rowLes propriétés sontgrid-row-startattributs etgrid-row-endL'abréviation combinée de .

.item {
  grid-column: <start-line/ <end-line>;
  grid-row: <start-line/ <end-line>;
}
1
2
3
4

Ci-dessous un exemple.

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
1
2
3
4
5
6
7
8
9
10
11

Dans le code ci-dessus, le projetitem-1Occupez la première ligne, de la première ligne de colonne à la troisième ligne de colonne.

Parmi ces deux attributs, vous pouvez également utiliserspanMot-clé indiquant le nombre de grilles à couvrir.

.item-1 {
  background: #b03532;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
  background: #b03532;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}
1
2
3
4
5
6
7
8
9
10
11

code ci-dessusdans, projetitem-1La zone occupée comprend la première ligne + la deuxième ligne et la première colonne + la deuxième colonne.

La barre oblique et les parties suivantes peuvent être omises et s'étendre sur une grille par défaut.

.item-1 {
  grid-column: 1;
  grid-row: 1;
}
1
2
3
4

Dans le code ci-dessus, le projetitem-1Occupez la première grille dans le coin supérieur gauche.

4.3 attribut de zone de grille

grid-areaL'attribut spécifie la zone dans laquelle l'élément est placé.

.item-1 {
  grid-area: e;
}
1
2
3

code ci-dessusEn , le projet n°1 est situé àezone, l’effet est comme indiqué ci-dessous.

grid-areaLes propriétés peuvent également être utilisées commegrid-row-start、grid-column-start、grid-row-end、grid-column-endLe formulaire d'abréviation fusionné précise directement l'emplacement du projet.

.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
1
2
3

Ci-dessous se trouve unexemple。

.item-1 {
  grid-area: 1 / 1 / 3 / 3;
}
1
2
3

4.4 Attributs justifier-soi, attribut align-self, attribut place-self

justify-selfLa propriété définit la position horizontale (gauche, centre, droite) du contenu de la cellule, suivie dejustify-itemsLes propriétés sont utilisées exactement de la même manière, mais ne s'appliquent qu'à un seul élément.

align-selfLa propriété définit la position verticale (haut, milieu, bas) du contenu de la cellule, suivie dealign-itemsL'utilisation des attributs est exactement la même et n'affecte qu'un seul projet.

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}
1
2
3
4

Les deux propriétés peuvent prendre les quatre valeurs suivantes.

• start : alignez le bord de départ de la cellule.
• end : aligner sur le bord final de la cellule.
• center : Centre à l’intérieur de la cellule.
• stretch : étirer pour occuper toute la largeur de la cellule (valeur par défaut).

Ci-dessous se trouvejustify-self: startexemple de.

.item-1 {
  justify-self: start;
}
1
2
3

place-selfLes propriétés sontalign-selfattributs etjustify-selfForme abrégée combinée de la propriété.

place-self: <align-self> <justify-self>;
1

Ci-dessous un exemple.

place-self: center center;
1

Si la deuxième valeur est omise,place-selfLa propriété considérera les deux valeurs comme égales.