Attribut grid-area CSS

Recommandation de cours :

Définition et utilisation

L'attribut grid-area peut également être utilisé pour attribuer un nom aux éléments de grille. Ensuite, il peut être utilisé par le conteneur de grille pour définir la taille et la position des éléments de grille dans le布局, c'est une abréviation des attributs suivants : grid-template-areas Référence des attributs de l'élément de grille nommé. Veuillez consulter les exemples ci-dessous.

Veuillez également consulter :

Tutoriel CSS :Mise en page en grille CSS

Exemple

Exemple 1

Faire commencer "item1" à la rangée 2, colonne 1 et couvrir deux rangées et trois colonnes :

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

Essayez-le vous-même

Avis :Plus d'exemples sont disponibles en bas de la page.

Syntaxe CSS

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

Valeur de l'attribut

Valeur Description
grid-row-start Définir à partir de quelle rangée afficher l'élément.
grid-column-start Définir à partir de quelle colonne afficher l'élément.
grid-row-end Définit où arrêter l'affichage de l'élément sur une ligne de rangée, ou combien de rangées il doit couvrir.
grid-column-end Spécifie où arrêter l'affichage de l'élément sur une ligne de colonne, ou combien de colonnes il doit couvrir.
itemname Définit l'élément du projet de la grille.

Détails techniques

Valeur par défaut : auto / auto / auto / auto
Héritage : Non
Création d'animation : Supporté. Voir :Propriétés liées aux animations。
Version : Module de mise en page en grille CSS niveau 1
Syntaxe JavaScript : object.style.gridArea="1 / 2 / span 2 / span 3"

Plus d'exemples

Exemple 2

L'élément Item1 est nommé "myArea" et couvre tous les cinq colonnes dans un agencement de grille de cinq colonnes :

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

Essayez-le vous-même

Exemple 3

Faites en sorte que "myArea" couvre deux colonnes dans un agencement de grille de cinq colonnes (les points virgules représentent les éléments sans nom) :

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

Essayez-le vous-même

Exemple 4

Faites en sorte que "item1" couvre deux colonnes et deux lignes :

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

Essayez-le vous-même

Exemple 5

Nommez tous les éléments et créez un modèle de page web 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';
{}

Essayez-le vous-même

Support du navigateur

Les nombres dans le tableau indiquent la première version de navigateur qui prend en charge cette propriété en totalité.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44