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

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

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

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

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

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

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

Copier après la connexion

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!