Résumé de l'utilisation de la disposition Grid en CSS (avec code)

Cet article vous présente un résumé de l'utilisation de la disposition Grid en CSS (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile

1. Utilisation de base

Il existe 5 attributs principaux de la disposition en grille :

.parent {
    display: grid;
    grid-template-colomns: 30px 1fr;
    grid-template-rows: repeat(3, 30px) 1fr;
    & > .child {
        grid-column: 1 / 3;
        grid-row: 1;
    }
}

En général, la disposition en grille est :

L'élément parent définit d'abord comment de nombreuses lignes et colonnes dont vous disposez. Ensuite, l'élément enfant définit dans quelle ligne et colonne il se trouve (il peut s'étendre sur plusieurs lignes ou colonnes).

Parmi eux, tout le monde devrait être familier avec l'attribut d'affichage. . N'est-ce pas ? Pas plus de détails ici. La fonction

repeat signifie répéter une valeur CSS n fois

peut être divisée en deux attributs : gird-column et grid-column-start. 🎜>grid-column-end

peut être divisé en deux attributs :

et gird-row.grid-row-startgrid-row-end

2

<span style="font-size: 16px;">grid-template-areas< 🎜. > et <span style="font-size: 16px;">grid-template-areas</span><span style="font-size: 16px;">grid-area</span><span style="font-size: 16px;">grid-area</span>

Cet attribut a en fait une signification hiéroglyphique.grid-template-areas

.parent {
    display: grid;
    grid-template-colomns: 100px 1fr;
    grid-template-rows: 1fr 50px;
    grid-template-areas:
        "nav    content"
        "footer footer ";

    & > .item1 {
      grid-area: nav;
    }
    & > .item2 {
      grid-area: content;
    }
    & > .item3 {
      grid-area: footer;
    }
}

Ci-dessus, nous avons divisé l'élément parent en 4 cellules. Ensuite, nous avons nommé la cellule de navigation supérieure gauche, le contenu de la cellule supérieure droite et le pied de page de la cellule inférieure

Enfin, nous avons juste besoin de Just. précisez à quelle zone vous appartenez dans l'élément enfant. Il y a un avantage à écrire

de cette façon : nous n'avons plus à écrire ennuyeux et difficile

et grid-column, nous pouvons donner un nom à notre propre zone. Noms sémantiques grid-row

3. </span>row-gap<code><span style="font-size: 16px;">row-gap</span>, <code><span style="font-size: 16px;">colomns-gap</span>colomns-gap , <span style="font-size: 16px;">grid-gap</span></h2>grid-gap<p>

Semblable à Flex, la disposition en grille prend également en charge l'espacement des lignes et des colonnes.grid-gaprow-gapcolomns-gap est une combinaison de

et

grid-gapgap

peut également être abrégé en

.colomns-gapnormalRemarque : <🎜. > La valeur par défaut est 1em, ce qui signifie que l'espacement des colonnes est

4 <span style="font-size: 16px;">grid-auto-columns</span><span style="font-size: 16px;">grid-auto-columns</span><. /code> grid-auto-rows et

<p>grid-auto-rows<strong>

Si vous ne savez pas à l'avance combien de lignes (combien de colonnes) votre grille possède, ces deux propriétés peuvent vous aider. Tout comme le sens littéral,

Cette propriété représente la hauteur (largeur) de la ligne (colonne) de la grille auto-croissante

Surtout lorsque vous rendre un indéfini Cet attribut sera très utile lorsque la longueur de la liste

.parent {
    display: grid;
    grid-template-colomns: 1fr;
    grid-auto-rows: 100px;

    & > .child {
        grid-column: 1;
    }
}

Par exemple :

Articles connexes recommandés :

À propos de la mise en page flexible des boîtes Introduction (avec code)

Comment implémenter une mise en page réactive avec CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!