Ein Gitter kann als ein sich überschneidender Satz vertikaler und horizontaler Linien definiert werden. Das CSS-Grid-Layout unterteilt eine Seite in Hauptabschnitte. Die Grid-Eigenschaft bietet ein rasterbasiertes Layoutsystem mit Zeilen und Spalten. Es erleichtert das Entwerfen von Webseiten ohne Positionierung und Floating. Das Rasterlayout gibt uns die Möglichkeit, Rasterstrukturen zu erstellen, die in CSS und nicht in HTML dargestellt werden.

Ähnlich wie bei der Tabelle ermöglicht es einem Benutzer, die Elemente in Zeilen und Spalten auszurichten. Aber im Vergleich zu Tabellen ist es einfach, Layouts mit dem CSS-Raster zu entwerfen. Wir können Spalten und Zeilen im Raster definieren, indem wir verwenden Rastervorlagenzeilen Und Rastervorlagenspalten Eigenschaften.

Ein Grid-Container kann durch die Deklaration erstellt werden Anzeige: Raster oder Anzeige: Inline-Grid auf einem Element. Der Rastercontainer enthält die Elemente eines Rasters, die in den Zeilen und Spalten platziert werden.

Grid vs. Flexbox

Im Allgemeinen stellt sich die Frage, wie sich das Raster von der Flexbox unterscheidet. Das Raster ist für zweidimensionale Layouts (Zeilen und Spalten gleichzeitig) gedacht, während die Flexbox für eindimensionale Layouts (entweder in einer Zeile oder einer Spalte) verwendet wird. Flexbox wird verwendet, wenn alles in einer geraden Linie sein muss.

Flexbox wird zum Anordnen der Elemente in einer einzelnen Spalte oder in einer einzelnen Zeile verwendet. Andererseits eignet sich das Raster am besten, um die Elemente in mehreren Spalten und Zeilen anzuordnen.

Lassen Sie uns das Raster in CSS anhand eines Beispiels verstehen.

Beispiel

 .main { display: grid; grid: auto auto / auto auto auto auto; grid-gap: 10px; background-color: blue; padding: 10px; } .num { background-color: lightblue; text-align: center; color: black; padding: 10px 10px; font-size: 30px; } One Two Three Four Five Six Seven Eight 

Ausgabe