Zusammenfassung der Verwendung des Rasterlayouts in CSS (mit Code)

Dieser Artikel stellt Ihnen eine Zusammenfassung der Verwendung des Grid-Layouts in CSS vor (mit Code). Freunde in Not können darauf verweisen

1. Grundlegende Verwendung

Es gibt 5 Kernattribute des Rasterlayouts:

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

Im Allgemeinen ist das Rasterlayout: Das übergeordnete Element wird zuerst definiert hat mehrere Zeilen und Spalten. Dann definiert das untergeordnete Element, in welcher Zeile und Spalte es sich befindet (es kann mehrere Zeilen oder Spalten umfassen).

Dabei sollte jeder mit dem Anzeigeattribut vertraut sein, Richtig? Hier keine weiteren Details. Die

Wiederholungsfunktion bedeutet, dass ein CSS-Wert n-mal wiederholt werden kann:

und

.gird-columngrid-column-startgrid-column-end kann in zwei Attribute aufgeteilt werden:

und

.gird-rowgrid-row-startgrid-row-end2

und

<span style="font-size: 16px;">grid-area</span><span style="font-size: 16px;">grid-template-areas</span>Dieses Attribut hat tatsächlich eine gewisse hieroglyphische Bedeutung.<span style="font-size: 16px;">grid-area</span>

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

Oben haben wir das übergeordnete Element in 4 Zellen unterteilt. Dann haben wir die obere linke Zellennavigation, den oberen rechten Zelleninhalt und die untere Zellenfußzeile benannt.

grid-template-areas Zum Schluss müssen wir nur noch angeben, welche Das Schreiben von

hat einen Vorteil: Wir müssen nicht mehr langweilig und schwierig

und

schreiben und können unserem Bereich einen semantischen Namen geben

grid-column3. grid-row</p>Zeilenlücke<h2 id="code-span-style-font-size-px-span-code-code-span-style-font-size-px-row-gap-span-code-Spaltenlücke-span-style-font-size-px-code-span-code-span-style-font-size-px-colomns-gap-span-code-code-span-style-font-size-px-grid-gap-span-code-code-span-style-font-size-px-grid-gap-span-code">, <code><span style="font-size: 16px;">row-gap</span>Spaltenlücke< /code> , <span style="font-size: 16px;">colomns-gap</span><span style="font-size: 16px;">grid-gap</span><span style="font-size: 16px;">grid-gap</span>Ähnlich wie Flex unterstützt das Grid-Layout auch Zeilen- und Spaltenabstände.

ist eine Kombination aus grid-gap und row-gap kann auch als colomns-gap abgekürzt werden.

grid-gapHinweis: Der Standardwert von gap ist

, was angibt, dass der Spaltenabstand

colomns-gapnormal1em4 </p>grid-auto-columns<h2 id="code-span-style-font-size-px-beträgt-span-code-code-span-style-font-size-px-grid-auto-columns-span-code-grid-auto-rows-span-style-font-size-px-code-span-code-span-style-font-size-px-grid-auto-rows-span-code-Wenn-Sie-nicht-im-Voraus-wissen-wie-viele-Zeilen-Spalten-Ihr-Raster-hat-können-diese-beiden-Eigenschaften-hilfreich-sein-Sie-Genau-wie-die-wörtliche-Bedeutung"> beträgt <code><span style="font-size: 16px;">grid-auto-columns</span>grid-auto-rows<span style="font-size: 16px;">grid-auto-rows</span>Wenn Sie nicht im Voraus wissen, wie viele Zeilen (Spalten) Ihr Raster hat, können diese beiden Eigenschaften hilfreich sein Sie. Genau wie die wörtliche Bedeutung: Dieses Attribut stellt die Höhe (Breite) der selbstwachsenden Rasterzeile (Spalte) dar.

Besonders wenn Sie eine Liste mit variabler Zeitlänge rendern Attribut wird sehr nützlich sein.

Zum Beispiel:

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

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

Empfohlene verwandte Artikel:

Einführung in das flexible Box-Layout (mit Code)

So implementieren Sie ein responsives Layout mit CSS

Das obige ist der detaillierte Inhalt vonZusammenfassung der Verwendung des Rasterlayouts in CSS (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!