CSS-Grid-Layout GRID-Tutorial

Raster ist ein echtes Layout-Artefakt. CSS hatte das Konzept des Layouts erst nach der Einführung der Flex-Layout- und Grid-Layout-Module wirklich. Das ursprüngliche Tabellenlayout war seltsam, und dann waren überall Floats zu sehen. Vielleicht wurde Abosulte verwendet, um das 布局 der Seite zu realisieren. Kurz gesagt, die Implementierung ist sehr umständlich. Sie müssen immer darauf achten, ob es zusammenbricht, wenn ich es auf diese Weise schreibe, ob es sich auf die nachfolgenden Elemente auswirkt und warum es immer noch falsch ist. Der Autor bezeichnet diese Implementierungen kühn als strukturelle Tricks, nämlich Flex und Grid. Büro. Flex ist für das eindimensionale Layout verantwortlich, und Grid ist für das zweidimensionale Layout verantwortlich. Beide Layouts sind sehr leistungsfähig, aber eines ist schwieriger als das andere, und es gibt so viele Attribute, dass ich jemandem Blut erbrechen möchte awesome ist 模块 statt 属性. Heute werden wir nur die Konzepte im Zusammenhang mit dem Rasterlayout rund um das Bild unten vorstellen

Gittercontainer

Der Ort, an dem das Rasterlayout beginnt , dem Gittermodulträger. Von außen sieht es aus wie ein 块 oder vielleicht auch ein inline-block块, aber im Inneren des Behälters befinden sich Zellen nacheinander. Wie das Flex-Layout ist es auch in Containereigenschaften und Artikeleigenschaften unterteilt.

Gitterlinien

Gitterlinien umfassen horizontale und vertikale Linien. Die sich kreuzenden Linien zerteilen den Gitterbehälter in kleinste Einheiten.单元格 Rasterlinien sind nummeriert, beginnend mit der Nummer 1. Im Bild oben gibt es 6 horizontale und 6 vertikale Linien. Sie können den Threads auch einen Namen geben, wenn Sie möchten, und ein Thread kann mehrere Namen haben.

Zelle

Gitterzelle Der Block mit grünem Hintergrund im Bild ist die Zelle, die kleinste Maßeinheit für das Rasterlayout Der Container hat insgesamt 25 Zellen.

Gittergleis

Der mittlere Teil zweier benachbarter Gitterlinien ist das Gleis, weil es so ist Legen Sie die Breite der Spur fest. Wenn Sie die Breite und Höhe der Zellen separat festlegen, entsteht wahrscheinlich ein Wasserfallfluss, und die Komplexität nimmt stark zu. Schauen Sie sich die hellblauen und hellrosa Schienen im Bild oben noch einmal an, um ein Gefühl dafür zu bekommen.

Gitterbereich

Die Bedeutung der Existenz von Gitterlinien, Zellen und Spuren besteht darin, den Container in die Bereiche zu unterteilen, die Sie benötigen Bereich. Eine Region ist ein ganzer Block, der mehrere Zellen enthalten kann. Wie kann man ihn also teilen? Der Bereich, in dem sich zwei horizontale Gitterlinien und zwei vertikale Gitterlinien schneiden, ist die Fläche. Wenn der Container sinnvoll in mehrere Bereiche unterteilt ist, wird der Layoutzweck erreicht. Bereiche können sich überlappen, daher gibt es einen Z-Index.

Das war’s für den heutigen Konzeptteil. Die Kenntnisse im Zusammenhang mit der Rasterlayout-Programmierung werden später ausführlich vorgestellt.
ps: Das Bild ist ein Auszug aus CSS Grid Layout: What is Grid Layout

Begleitender Artikel bietet ein detailliertes Verständnis des Layout-Artefakts Flexbox

Grid, ein echtes Layout-Artefakt. CSS hatte das Konzept des Layouts erst nach der Einführung der Flex-Layout- und Grid-Layout-Module wirklich. Das ursprüngliche Tabellenlayout war seltsam, und dann waren überall Floats zu sehen. Vielleicht wurde Abosulte verwendet, um das 布局 der Seite zu realisieren. Kurz gesagt, die Implementierung ist sehr umständlich. Sie müssen immer darauf achten, ob es zusammenbricht, wenn ich es auf diese Weise schreibe, ob es sich auf die nachfolgenden Elemente auswirkt und warum es immer noch falsch ist. Der Autor nennt diese Implementierungen kühn „Layout-Tricks“ und bezeichnet sie als die eigentlichen Layouts. Flex ist für das eindimensionale Layout verantwortlich, und Grid ist für das zweidimensionale Layout verantwortlich. Beide Layouts sind sehr leistungsfähig, aber eines ist schwieriger als das andere, und es gibt so viele Attribute, dass ich jemandem Blut erbrechen möchte awesome ist 模块 statt 属性. Heute werden wir nur die Konzepte im Zusammenhang mit dem Rasterlayout anhand der folgenden Abbildung vorstellen.

Grid-Container

Der Ort, an dem das Grid-Layout beginnt, der Träger des Grid-Moduls. Von außen sieht es aus wie ein 块 oder vielleicht auch ein inline-block块, aber im Inneren des Behälters befinden sich Zellen nacheinander. Wie das Flex-Layout ist es auch in Containereigenschaften und Artikeleigenschaften unterteilt.

Gitterlinien

Gitterlinien umfassen horizontale und vertikale Linien. Die sich kreuzenden Linien zerteilen den Gitterbehälter in kleinste Einheiten.单元格 Rasterlinien sind nummeriert, beginnend mit der Nummer 1. Im Bild oben gibt es 6 horizontale und 6 vertikale Linien. Sie können den Threads auch einen Namen geben, wenn Sie möchten, und ein Thread kann mehrere Namen haben.

Zelle

Gitterzelle Der grüne Hintergrundblock im Bild ist die Zelle, die kleinste Maßeinheit für das Rasterlayout. Der Container hat insgesamt 25 Zellen.

Gittergleis

Der mittlere Teil zweier benachbarter Gitterlinien ist das Gleis, weil es so ist Legen Sie die Breite der Spur fest. Wenn Sie die Breite und Höhe der Zellen separat festlegen, entsteht wahrscheinlich ein Wasserfallfluss, und die Komplexität nimmt stark zu. Schauen Sie sich die hellblauen und hellrosa Schienen im Bild oben noch einmal an, um ein Gefühl dafür zu bekommen.

Gitterbereich

Die Bedeutung der Existenz von Gitterlinien, Zellen und Spuren besteht darin, den Container in die Bereiche zu unterteilen, die Sie benötigen Bereich. Eine Region ist ein ganzer Block, der mehrere Zellen enthalten kann. Wie kann man ihn also teilen? Der Bereich, in dem sich zwei horizontale Gitterlinien und zwei vertikale Gitterlinien schneiden, ist die Fläche. Wenn der Container sinnvoll in mehrere Bereiche unterteilt ist, wird der Layoutzweck erreicht. Regionen können sich überlappen, daher gibt es einen Z-Index.

Der obige Inhalt ist das CSS-Grid-Layout-GRID-Tutorial. Ich hoffe, es kann Ihnen helfen.

Verwandte Empfehlungen:

CSS Grid Layout Guide

CSS Einführung in das Rasterlayout module_html/css_WEB-ITnose

Bringen Sie Ihnen das CSS-Rasterlayout in fünf Minuten bei

Das obige ist der detaillierte Inhalt vonCSS-Grid-Layout GRID-Tutorial. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!