display:grid in CSS3, eine Einführung in das Rasterlayout

1. Rasterlayout (Raster):

Es unterteilt die Webseite in Raster und Sie können verschiedene Raster kombinieren, um verschiedene Layouts zu erstellen.

2. Grundlegende Konzepte :

Der Container und das Projekt sind in der Abbildung dargestellt:

    <div Klasse="Inhalt">
        <div Klasse="b">1</div>
        <div Klasse="b">2</div>
        <div Klasse="b">3</div>
        <div Klasse="b">4</div>
        <div Klasse="b">5</div>
        <div class="b">6</div>
        <div class="b">7</div>
        <div class="b">8</div>
        <div class="b">9</div>
    </div>

.content ist der Container und .b ist das Projekt.

Zeilen und Spalten: Zeile: Zeile;

Spalte: Spalte;

3. Containereigenschaften

display:grid; //Der Standard ist ein Blockelement;

Anzeige: Inline-Raster; // Inline-Blockelemente

Geben Sie einen Container an, um das Rasterlayout zu verwenden.

Hinweis: Nach der Einstellung auf „Raster“ werden die Einstellungen „Float“, „Display: Inline-Block“, „Display: Table-Cell“, „Vertical-Align“ und „Column-*“ des untergeordneten Elements ungültig.

.Inhalt {
            Kastenschatten: 0 0 1px #f6f;
            Anzeige: Raster;
            Rastervorlagenspalten: 100px 100px 100px;
            Rastervorlagenzeilen: 100px 100px 100px;
        }

4. Attributerklärung

grid-template-columns: definiert die Breite jeder Spalte;

grid-template-columns: 100px 100px 100px; //Insgesamt drei Spalten, jede Spalte ist 100px breit; =

grid-template-rows: definiert die Zeilenhöhe jeder Zeile;

grid-template-rows: 100px 100px 100px; //Von oben nach unten ist jede Zeile 100px hoch;

//Zusätzlich zur Verwendung von Pixeln können Sie auch Prozentsätze verwenden.

expandieren:

Das wiederholte Schreiben von Werten ist mühsam, daher können Sie die Wiederholungsfunktion verwenden.

wiederholen (Anzahl der Male, Größe);

Beispiel: repeat(3,100px); //3-mal wiederholen, jedes Mal 100px;

Methode zum Wiederholen des Schreibens:

Raster-Vorlage-Spalten: Wiederholung (3.100 Pixel);

Rastervorlage-Zeilen: Wiederholung (3.100 Pixel);

Sie können auch ein bestimmtes Muster mit variabler Größe wiederholen;

Zum Beispiel:

Rastervorlagenspalten: 100px 80px 100px;

Schreiben Sie es wie folgt um:

grid-template-columns:repeat(2,100px 80px); // stellt die zweimalige Wiederholung des 100px 80px-Musters dar; das heißt, 4 Spalten;

ist gleichbedeutend mit:

Rastervorlagenspalten: 100px 80px 100px 80px;

Wie in der Abbildung gezeigt:

5. Schlüsselwörter

1. Automatisch ausfüllen: Wenn die Containergröße nicht festgelegt ist, die Artikelgröße jedoch festgelegt ist, können Sie das Schlüsselwort „Autom. ausfüllen“ zum automatischen Ausfüllen verwenden.

    .Inhalt {
            Kastenschatten: 0 0 1px #f6f;
            Anzeige: Raster;
            Rastervorlagenspalten: Wiederholen (automatisches Ausfüllen, 100 px);
} 

2, fr (Bruch): Wenn die Breite zweier Spalten 1fr bzw. 2fr beträgt, bedeutet das, dass die letztere doppelt so breit ist wie die erstere.

   .Inhalt {
            Kastenschatten: 0 0 1px #f6f;
            Anzeige: Raster;
            Rastervorlagenspalten: 1fr 2fr;
            Raster-Vorlagenzeilen: Wiederholung (3, 100px 80px);
}

fr kann auch mit px verwendet werden;

        .Inhalt {
            Kastenschatten: 0 0 1px #f6f;
            Anzeige: Raster;
            Rastervorlagenspalten: 400px 1fr 2fr;
} 

3.minmax();

Rastervorlagenspalten: 1fr 5fr minmax(100px, 1fr);

Erklärung: Die erste Spalte ist 1fr, die zweite Spalte ist 5fr, die dritte Spalte hat einen Minimalwert von 100px und einen Maximalwert von 1fr. Wenn die zweite Spalte fr unendlich ist und die dritte Spalte 100px erreicht, werden Werte aus der ersten Spalte übernommen.

       .Inhalt {
            Kastenschatten: 0 0 1px #f6f;
            Anzeige: Raster;
            Rastervorlagenspalten: 1fr 5fr minmax(100px, 1fr);
}

4.auto: adaptiv;

   .Inhalt {
            Kastenschatten: 0 0 1px #f6f;
            Anzeige: Raster;
            Rastervorlagenspalten: 100px automatisch 100px;
}

6. Name der Gitterlinie:

        .Inhalt {
            Kastenschatten: 0 0 1px #f6f;
            Anzeige: Raster;
            Rastervorlagenspalten: [c1] 100px [c2] 100px [c3] auto [c4];
            Raster-Vorlagenzeilen: [r1] 100px [r2] 100px [r3] auto [r4];
}

Erläuterung: Geben Sie den Namen jeder Rasterlinie an, um später leichter darauf zurückgreifen zu können.

Es können auch mehrere Namen vorhanden sein; [c1,c1a]

7. Abstand

Zeilenlücke: Zeilenabstand;

 .Inhalt {
            Kastenschatten: 0 0 1px #f6f;
            Anzeige: Raster;
            Rastervorlagenspalten: 100px 100px 100px;
            Rastervorlagenzeilen: 100px 100px 100px;
            Zeilenabstand: 20px;
}

colum-gap: Spaltenabstand;

 .Inhalt {
            Kastenschatten: 0 0 1px #f6f;
            Anzeige: Raster;
            Rastervorlagenspalten: 100px 100px 100px;
            Rastervorlagenzeilen: 100px 100px 100px;
            Spaltenabstand: 20px;
}

Abkürzung:

Lücke: 20px 20px;

Kurzformen für Zeilenlücke und Spaltenlücke;

Die Lücke lässt den zweiten Wert aus und der Browser betrachtet den zweiten Wert als gleich dem ersten Wert.

8. Region

grid-template-areas: Das Rasterlayout ermöglicht Ihnen, „Bereiche“ anzugeben, die aus einer einzelnen Zelle oder mehreren Zellen bestehen. Die Eigenschaft „grid-template-areas“ wird zum Definieren von Bereichen verwendet.

  .Inhalt {
            Kastenschatten: 0 0 1px #f6f;
            Anzeige: Raster;
            Raster-Vorlagenbereiche: „abc“ „def“ „gh i“;
        }

Zusammenfassen

Oben finden Sie eine Einführung in display:grid und das Grid-Layout in CSS3. Ich hoffe, es ist hilfreich für Sie. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!