Élément en grille CSS

1
2
3
4
5

Essayer par vous-même

Élément enfant (projet)

Le conteneur de grille contient des éléments de grille.

Par défaut, chaque ligne et chaque colonne du conteneur a un élément de grille, mais vous pouvez définir le style des éléments de grille pour qu'ils couvrent plusieurs colonnes et/ou lignes.

Propriété grid-column :

grid-column Cette propriété définit où placer le projet dans une colonne.

Vous pouvez définir la position de début et de fin de l'élément.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Remarque :grid-column Les propriétés sont des abréviations des propriétés grid-column-start et grid-column-end.

Pour placer un projet, vous pouvez utiliser le numéro de ligne (numéros de ligne) ou utiliser le mot-clé "span" pour définir combien de colonnes ce projet va couvrir.

Exemple

Fait que "item1" commence à la colonne 1 et se termine avant la colonne 5 :

.item1 {
  grid-column: 1 / 5;
}

Essayer par vous-même

Exemple

Fait que "item1" commence à la colonne 1 et couvre 3 colonnes :

.item1 {
  grid-column: 1 / span 3;
}

Essayer par vous-même

Exemple

Fait que "item2" commence à la colonne 2 et couvre 3 colonnes :

.item2 {
  grid-column: 2 / span 3;
}

Essayer par vous-même

Attribut grid-row :

grid-row Cet attribut définit sur quelle ligne placer l'élément.

Vous pouvez définir la position de début et de fin de l'élément.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Remarque :grid-row C'est un attribut abrégé pour grid-row-start et grid-row-end.

Pour placer des éléments, vous pouvez mentionner le numéro de ligne ou utiliser le mot-clé "span" pour définir combien de lignes l'élément couvrira :

Exemple

Fait que "item1" commence à la ligne-row 1 et se termine à la ligne-row 4 :

.item1 {
  grid-row: 1 / 4;
}

Essayer par vous-même

Exemple

Fait que "item1" commence à la ligne 1 et couvre 2 lignes :

.item1 {
  grid-row: 1 / span 2;
}

Essayer par vous-même

Attribut grid-area

grid-area Les attributs peuvent être utilisés comme attributs abrégés pour grid-row-start, grid-column-start, grid-row-end et grid-column-end.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Exemple

Fait que "item8" commence à la ligne-row 1 et à la ligne-column-line 2, et se termine à la ligne-row 5 et à la ligne-column line 6 :

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

Essayer par vous-même

Exemple

Fait que "item8" commence à la ligne-row 2 et à la ligne-column-line, et couvre 2 lignes et 3 colonnes :

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

Essayer par vous-même

Éléments de grille nommés

grid-area Les attributs peuvent également être utilisés pour attribuer des noms aux éléments de grille.

Header
Menu
Main
Right
Footer

par le conteneur de grille. grid-template-areas l'attribut pour faire référence aux éléments de grille nommés.

Exemple

Le nom de l'item1 est "monArea" et il couvre tous les cinq colonnes du layout de grille des cinq colonnes :

.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'monArea monArea monArea monArea monArea';
}

Essayer par vous-même

Chaque ligne est définie par des guillemets obliques (' ').

Les colonnes de chaque ligne sont définies à l'intérieur des guillemets obliques et séparées par des espaces.

Remarque :Les pointsvirgules représentent des projets de grille sans nom.

Exemple

Faites en sorte que "myArea" couvre deux colonnes sur cinq colonnes de mise en page en grille (les pointsvirgules représentent des éléments sans nom) :

.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea . . .';
}

Essayer par vous-même

Pour définir deux lignes, définissez la deuxième ligne dans un autre ensemble de guillemets obliques :

Exemple

Pour faire "item1" couvrir deux colonnes et deux lignes :

.grid-container {
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
}

Essayer par vous-même

Exemple

Nommez tous les éléments et créez un modèle de page web toujours prêt à l'emploi :

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
}

Essayer par vous-même

L'ordre des éléments

La mise en page en grille nous permet de placer les éléments à l'endroit que nous préférons.

Le premier élément du code HTML n'a pas besoin d'être affiché en premier dans la grille.

1
2
3
4
5
6

Exemple

.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }

Essayer par vous-même

Vous pouvez réorganiser l'ordre des tailles d'écran en utilisant des requêtes média :

Exemple

@media only screen and (max-width: 500px) {
  .item1 { grid-area: 1 / span 3 / 2 / 4; }
  .item2 { grid-area: 3 / 3 / 4 / 4; }
  .item3 { grid-area: 2 / 1 / 3 / 2; }
  .item4 { grid-area: 2 / 2 / span 2 / 3; }
  .item5 { grid-area: 3 / 1 / 4 / 2; }
  .item6 { grid-area: 2 / 3 / 3 / 4; }
}

Essayer par vous-même