Verstehen Sie das CSS3-Rasterlayout in 10 Minuten

Grundlegende Einführung

Im vorherigen Artikel haben wir CSS3 Flexbox vorgestellt. Heute sprechen wir über ein weiteres leistungsstarkes Feature von CSS3: Grid.

Frontend-Entwickler sollten mit Grid sehr vertraut sein. Es wird ins Chinesische als „Grid“ übersetzt. Wer Bootstrap, semantische UI und Ant-Design verwendet hat, muss mit dem Grid-Layout vertraut sein. In der Vergangenheit wurde das Grid-Layout in CSS-Frameworks im Allgemeinen durch Float und prozentuale Breite implementiert. Diese Implementierung hat mehrere Nachteile:

• Das HTML ist nicht prägnant genug;
• Um einen hohen Einsturz zu vermeiden, muss der Schwimmer entfernt werden.
• Die Spaltenanzahl ist fix und kann nicht flexibel definiert werden. Beispielsweise hat Bootstrap 12 Spalten, Semantic UI 16 Spalten und Ant Design 24 Spalten.

Natürlich kann Grid auch mit Flex implementiert werden, aber es ist nicht viel einfacher als die Verwendung von Float, und Flex eignet sich gut für die eindimensionale Raumanordnung, aber nicht so gut für den zweidimensionalen Raum wie Grid. Jetzt hat CSS3 Grid auf Spezifikations- und Standardebene implementiert und das Programmiererlebnis wurde erheblich verbessert!

Kompatibilität

Verwendung

Grid ist ein zweidimensionales Rastersystem bestehend aus mehreren Spalten und Zeilen.

1. Spalte

(1) Spalten festlegen

Das Grid in CSS3 lässt sich in beliebig viele Spalten unterteilen, die Breite jeder Spalte lässt sich beliebig einstellen! Schauen wir uns ein einfaches Beispiel an:

html:

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

CSS:

Körper{
    Farbe: #fff;
    Textausrichtung: zentriert;
}
#Inhalt{
    Anzeige: Raster;
    Rastervorlagenspalten: 33,3 % 33,3 % 33,3 %;
    maximale Breite: 960px;
    Rand: 0 automatisch;
}
#Inhaltsdiv{
    Hintergrund: hellgrau;
    Polsterung: 30px;
}
#Inhalt div:n-tes Kind (gerade) {
    Hintergrund: himmelblau;
}

Wirkung:

Wenn wir display: grid und grid-template-columns: 33.3% 33.3% 33.3% einstellen, wird #content in ein Raster mit drei Zeilen und drei Spalten aufgeteilt. Zu diesem Zeitpunkt wird #content als Rastercontainer bezeichnet und die untergeordneten Elemente von #content werden als Rasterelemente bezeichnet.

Wir können die Anzahl und Breite der Spalten auch beliebig verändern, zum Beispiel:

#Inhalt{
    Rastervorlagenspalten: 10 % 20 % 30 % 40 %;
}

Wirkung:

(2) fr (Bruchteil)

CSS3 führt eine neue Einheit FR (Fraction) ein, was auf Chinesisch „Bruch“ bedeutet. Sie wird verwendet, um Prozentsätze zu ersetzen. Da Prozentsätze (Dezimalzahlen) nicht teilbar sind, kann durch die Verwendung von Brüchen das Schreiben mehrerer Dezimalstellen vermieden werden. Beispielsweise kann ein Raster mit drei gleich breiten Spalten wie folgt dargestellt werden:

Rastervorlagenspalten: 1fr 1fr 1fr;

(3) wiederholen

Wir können auch die repeat verwenden, um das Schreiben von Spalten oder Zeilen zu vereinfachen. Die Wiederholungsmethode akzeptiert zwei Parameter. Der erste Parameter gibt die Anzahl der Wiederholungen an und der zweite Parameter den wiederholten Inhalt. Daher können wir das Raster auch mit drei gleich breiten Spalten wie folgt ausdrücken:

Raster-Vorlagenspalten: Wiederholung (3, 1fr);

Wenn wir eine große Anzahl von Spalten definieren müssen, ist „repeat“ sehr nützlich. Wenn wir beispielsweise ein Raster mit 10 Spalten gleicher Breite definieren möchten, können wir repeat(10, 1fr) schreiben, anstatt 1fr 10 Mal zu wiederholen.

2. Reihe

(1) Zeile festlegen

Nachdem wir die Spalte festgelegt haben, wird die Zeile automatisch aufgrund des Zeilenumbruchs des Elements generiert, wir können jedoch weiterhin die Nummer und Höhe der Zeile festlegen.

CSS:

#Inhalt{
    Anzeige: Raster;
    Raster-Vorlagenspalten: Wiederholung (3, 1fr);
    Raster-Vorlagenzeilen: Wiederholung (4, 60px);
    maximale Breite: 960px;
}

Wirkung:

Sie können sehen, dass die vierte Zeile zwar keinen Inhalt hat, die Zeile jedoch existiert und diesen Platz einnimmt.

(2) Minmax

Im obigen Beispiel geben wir der Zeile eine feste Höhe, was zu einem Problem führt: Wenn ein Rasterelement viel Inhalt enthält, wird ein Teil des Inhalts aufgrund der festen Höhe nicht angezeigt, wie unten gezeigt:

Um dieses Problem zu lösen, bietet CSS die minmax -Funktion, mit der wir die minimale und maximale Höhe der Zeile festlegen können. Wenn die maximale Höhe automatisch ist, kann die Höhe der Zeile adaptiv sein:

CSS:

Raster-Auto-Zeilen: minmax(60px, auto);
// oder Grid-Template-Rows: repeat(3, minmax(60px, auto));

Wirkung:

(3) Gitterlücke

Wenn wir Abstände zwischen Zeilen und Spalten hinzufügen möchten, gibt es auch hier vorgefertigte Methoden:

CSS:

Gitterlücke:{
  10px;
}

Wirkung:

3. Gitterlinie

In allen obigen Beispielen ist jedes Rasterelement im Raster in der Standardreihenfolge angeordnet. Was ist, wenn wir das Layout neu anordnen und die Position oder Größe des Rasterelements ändern möchten? Zu diesem Zweck wird das Konzept der Gitterlinien eingeführt. Die sogenannten Gitterlinien sind die Trennlinien, nachdem das Gitter in mehrere gleiche Teile unterteilt wurde. Die horizontalen und vertikalen Linien mit den Nummern 1 bis 8 in der folgenden Abbildung sind Gitterlinien:

<img src="http://lc-jOYHMCEn.cn-n1.lcfi...;/>

Durch Definieren der Start- und Endrasterlinien des Rasterelements können wir die Position und den Abdeckungsbereich des Rasterelements steuern. Ein einfaches Beispiel:

html:

<div id="Inhalt">
    <div Klasse="eins">1</div>
</div>

CSS:

 #Inhalt {
  Anzeige: Raster;
  Rastervorlagenspalten: Wiederholung (8, 100px);
  Rastervorlagenzeilen: Wiederholung (8, 100 px);
  Rasterabstand: 10px;
}

.eins {
  Rasterspaltenanfang: 3;
  Gitterspaltenende: 6;
  Rasterzeilenstart: 3;
  Gitterzeilenende: 6;
}

Wirkung:

Durch Festlegen von grid-column-start/end grid-row-start/end entspricht dies dem Festlegen der Start- und Endkoordinaten für das Rasterelement. Das obige CSS kann auch wie folgt abgekürzt werden:

.eins {
  Gitterspalte: 3 / 6;
  Gitterzeile: 3 / 6;
}
// oder .one {
  Rasterfläche: 3 / 3 / 6 / 6;
}

Wenn die Startrasterlinie des Rasterelements die Standardlinie ist, können wir einfach ihre Spanne festlegen:

.eins{
  Gitterspalte: Spanne 3;
  Gitterzeile: Spanne 3;
}

4. Rasterbereichsvorlage

Zusätzlich zum Layout mithilfe von Rasterlinien bietet CSS3 eine leistungsfähigere Layoutmethode: Rasterbereichsvorlagen. Anstatt zu erklären, was eine Rasterbereichsvorlage ist, schauen wir uns den Code an:

html:

<div id="Inhalt">
    <header>Kopfzeile</header>
    <main>Haupt</main>
    <section>Abschnitt</section>
    <aside>Abgesehen davon</aside>
    <nav>Navigation</nav>
    <footer>Fußzeile</footer>
</div>

CSS:

Körper {
  Farbe: #fff;
  Textausrichtung: zentriert;
}

#Inhalt {
  Anzeige: Raster;
  Raster-Vorlagenspalten: Wiederholung (4, 1fr);
  Raster-Auto-Zeilen: Minmax (100px, Auto);
  maximale Breite: 960px;
  Rand: 0 automatisch;
  Rasterabstand: 10px;
  Raster-Vorlagenbereiche: 
  "Kopfzeile Kopfzeile Kopfzeile"
  "beiseite. Haupthaupt"
  "nav. Haupt-Haupt" 
  "Abschnitt Abschnitt Abschnitt Abschnitt"
  "Abschnitt Abschnitt Abschnitt Abschnitt"
  "Fußzeile Fußzeile Fußzeile Fußzeile";
}

#Inhalt>* {
  Hintergrund: #3bbced;
  Polsterung: 30px;
}

Kopfzeile { Rasterbereich: Kopfzeile; }
Haupt { Rasterbereich: Haupt; }
Abschnitt{ Rasterbereich: Abschnitt; }
beiseite { Rasterbereich: beiseite; }
nav { Rasterbereich: nav; }
Fußzeile { Rasterbereich: Fußzeile; }

Wirkung:

Verstehst du? Der entscheidende Punkt ist grid-template-areas Eigenschaft des Grid-Containers. Wir legen für jedes Rasterelement einen Rasterbereich fest und legen dann eine Rasterbereichsvorlage (grid-template-areas) im Rastercontainer fest. Jede Zeichenfolgenzeile in der Vorlage stellt eine Zeile dar und jeder Bereichsname stellt eine Spalte dar. Das geometrische Layout wird vollständig mit Text simuliert. Leere Rasterelemente werden durch dargestellt . Natürlich müssen Sie bei der Verwendung von Rasterbereichen auf eine strenge Syntax achten. CSS kann Syntax wie "header main header main" nicht analysieren. Die durch den Bereichsnamen simulierte Struktur muss im zweidimensionalen Raum ein Ganzes sein, da jedes Rasterelement nicht geteilt werden kann.

Die Vorteile der Verwendung von Rasterbereichsvorlagen liegen auch bei der Implementierung eines responsiven Layouts auf der Hand. Wir müssen nur unterschiedliche Rasterbereichsvorlagen für unterschiedliche Bildschirmgrößen formulieren.

5. Ausrichten und ausrichten

Ähnlich wie Flex können mit Grid auch Justify und Align festgelegt werden, um die horizontale und vertikale Ausrichtung von Rasterelementen anzupassen. Es unterstützt auch Einstellungen für Rastercontainer oder einzelne Rasterelemente.

Festlegen des Rastercontainers

html:

<div id="Inhalt">
    <div Klasse="eins">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

CSS:

#Inhalt {
  Anzeige: Raster;
  Raster-Vorlagenspalten: Wiederholung (3, 1fr);
  Raster-Vorlagenzeilen: Wiederholung (2, Minmax (120px, Auto));
  Rasterabstand: 10px;
  maximale Breite: 960px;
  Elemente ausrichten: Start;
  Elemente ausrichten: Ende;
}

Wirkung:

Hinweis: Flex verwendet justify-content während Grid justify-items verwendet. Die Werte in Flex sind flex-start/flex-end während Grid start/end verwendet. Die Standardwerte sowohl für „Justify“ als auch für „Align“ sind stretch .

Festlegen des Rasterelements

CSS:

.eins{
  selbst ausrichten: starten;
  sich rechtfertigen: Ende;
}

Wirkung:

üben

Mit dem oben genannten Wissen können wir CSS3 Grid verwenden, um schnell verschiedene Layouteffekte zu erstellen. Hier sind einige einfache Codepen-Beispiele:

12-spaltiges Rasterlayout

Blütenblatt-Layout

Reaktionsfähiges Layout

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.