Einfaches Raster mit dem CSS Grid

Grid

Mit der CSS-Eigenschaft grid baust Du Dir schnell äußerst flexible Raster für Deine Website. grid besitzt die Komplexität, die sich Webdesigner immer gewünscht haben.

Eltern-Element

Um das Raster aufzuziehen, brauchst Du einen Container, der als Eltern-Element dient und das Layout-Modell ins Leben ruft. Das geschieht mit display: grid;. Mit grid-template-columns bestimmst Du anschließend die Anzahl der Spalten/columns, die grid aufbauen soll.

Im unteren Beispiel baut das Raster drei Spalten auf. Hilfreich ist die Größeneinheit fr (fraction, engl. für Bruchteil) – mehr dazu auf selfhtml.

Mit grid-column-gap und grid-row-gap bestimme ich im Beispiel dann den Abstand zwischen den Spalten (column) und Zeilen (row).

.grid--col--3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 1rem;
  grid-row-gap: 2rem;
}

HTML-Code für das Raster

Der übersichtliche HTML-Code für das Raster sieht dann so aus…

<div class="grid--col--3 mb1">
    <div>Zelle 1</div>
    <div>Zelle 2</div>
    <div>Zelle 3</div>
</div><!-- / .grid--col--3-->

Box 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Einfaches Raster mit dem CSS Grid

Grid

Eltern-Element

HTML-Code für das Raster

Box 1

Box 2

Box 3

Box 1

Box 2

Box 1

Box 2

Box 3

Box 4