CSS Grid

Erstellen

Ein Grid wird mit der CSS-Eigenschaft display: grid definiert. Mit den CSS-Eigenschaften grid-row und grid-column werden die Kind-Elemente positioniert

Im unteren Beispiel müssten die CSS-Eigenschaft grid-row und grid-column nicht festgelegt werden. Da der Browser dies selbst machen würde. Mit der CSS-Eigenschaft grid-auto-flow kann man festlegen wie die Kind-Element im Raster automatisch positioniert werden.

//Ein Grid mit 2 Zeilen und 2 Spalten
.mygrid {
    display: grid;
    grid-template-rows: 100px 100px;
    grid-template-columns: 100px 100px;
}
<div class="mygrid">
    <div style="grid-row: 1; grid-column: 1; background-color: blue;">Links oben<⁄div>
    <div style="grid-row: 1; grid-column: 2; background-color: blueviolet;">Rechts oben<⁄div>
    <div style="grid-row: 2; grid-column: 1; background-color: brown;">Links unten<⁄div>
    <div style="grid-row: 2; grid-column: 2; background-color: burlywood;">Rechts unten<⁄div>
<⁄div> 

Strecken

Auch das Stecken der Elemente über mehrere Raster wird mit den CSS-Eigenschaften grid-row und grid-column angegeben. Dabei wird mit der Zahl nicht die Spalte angegeben, sondern die Linie wo das Element starten und enden soll. Wir haben im unteren Beispiel jeweils 3 Linien. Links = 1, Mitte = 2 und rechts = 3 sowie oben = 1, Mitte = 2 und unten = 3. Mit der Angabe grid-column: 1/3 gibt man an, dass das Element bei der ersten Line starten und an der der Line 3 enden soll.


<div class="mygrid">
    <div style="grid-row: 1; grid-column: 1/3; background-color: blue;">Oben<⁄div>
    <div style="grid-row: 2; grid-column: 1; background-color: brown;">Links unten<⁄div>
    <div style="grid-row: 2; grid-column: 2; background-color: burlywood;">Rechts unten<⁄div>
<⁄div> 

Übereinanger

Auch das Positionieren von Kind-Elementen übereinander ist möglich.


.mygrid {
    display: grid;
    grid-template-rows: 100px 100px;
    grid-template-columns: 100px 100px;
    align-items: center;
    justify-items: center;
}
<div class="mygrid">
    <div style="grid-row: 1/3; grid-column: 1/3; background-color: blue; width: 90%; height: 90%;">.<⁄div>
    <div style="grid-row: 1/3; grid-column: 1/3; background-color: blueviolet; width: 80%; height: 80%;">.<⁄div>
<⁄div> 

Größen Angaben

Neben den üblichen Angaben wie px, em, %, vw, vh kann man auch fr (Fraction) angeben. Dabei steht 1fr für den restlichen Platz. Eine Website mit Header, Body und Footer ist mit einem CSS-Grid schnell erstellt. Mit den 2 CSS-Klassen unten wird nur der Body gescrollt alles andere bleibt immer sichbar.


.page {
    display: grid;
    grid-template-rows: 60px 1fr 45px;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.pageBody {
    padding-left: 2.5%;
    padding-right: 2.5%;
    width: 95%;
    //Höhe der View minus Header und Footer
    height: calc(100vh - 60px - 45px); 
    overflow-y: auto;
}

Ausrichtung

Alle Kind-Elemente können in der horizontalen sowie in der vertikalen ausgerichtet werden. Entweder über das Grid (Eltern-Element) mit den CSS-Eigenschaften justify-items (horizontale) und align-items (vertikale) oder jedes Kind-Element einzeln mit den CSS-Eigenschaften justify-self und align-self.


.mygrid {
    display: grid;
    grid-template-rows: 100px 100px;
    grid-template-columns: 100px 100px;
}

<div class="mygrid">
    <div style="grid-row: 1/3; grid-column: 1/3; background-color: aqua; justify-self: stretch; align-self: stretch;"></div>
    <div style="grid-row: 1; grid-column: 1; background-color: blue; width: 50px; height: 50px; justify-self: start; align-self: start;"></div>
    <div style="grid-row: 1; grid-column: 2; background-color: blueviolet; width: 50px; height: 50px; justify-self: end; align-self: start;"></div>
    <div style="grid-row: 2; grid-column: 1; background-color: brown; width: 50px; height: 50px; justify-self: start; align-self: end;"></div>
    <div style="grid-row: 2; grid-column: 2; background-color: burlywood; width: 50px; height: 50px; justify-self: end; align-self: end;"></div>
    <div style="grid-row: 1/3; grid-column: 1/3; background-color: cornflowerblue; width: 50px; height: 50px; justify-self: center; align-self: center;"></div>
</div>

Abstände zwischen Rasterzellen

Mit den CSS-Eigenschaften grid-row-gap und grid-column-gap lassen sich Abstände zwischen den Zellen hinzufügen.


.mygrid {
    display: grid;
    grid-template-rows: 100px 100px;
    grid-template-columns: 100px 100px;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
}

<div class="mygrid">
    <div style="background-color: aqua;"></div>
    <div style="background-color: blue;"></div>
    <div style="background-color: blueviolet;"></div>
    <div style="background-color: brown;"></div>
</div>

Automatische Zeilen

Man hat auch die Möglichkeit automatisch Zeilen oder Reichen Anhang der Kind-Elemente anlegen zu lassen. Dazu kann man mit grid-auto-rows oder grid-auto-columns festlegen wie hoch oder breite die Zellen sein sollen oder z.B. die CSS-Funktion minmax() nutzen.


.mygrid {
    display: grid;
    grid-template-columns: 100%;
    grid-auto-rows: 50px;
    grid-row-gap: 10px;
}

<div class="mygrid">
    <div style="background-color: aqua;"></div>
    <div style="background-color: blue;"></div>
    <div style="background-color: blueviolet;"></div>
    <div style="background-color: brown;"></div>
</div>

Areas

Areas sind sehr nützlich, um z.B. ein responsives Designe in Verbindung mit Media Queries zu erstellen oder dem User die Möglichkeit geben Inhalte anders zu positionieren.


.mygrid {
    display: grid;
    grid-template-rows: 100px 100px;
    grid-template-columns: 100px 100px;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    grid-template-areas: 
        "c2 c1"
        "c4 c3";
}

<div class="mygrid">
    <div style="background-color: aqua; grid-area: c1;">c1</div>
    <div style="background-color: blue; grid-area: c2;">c2</div>
    <div style="background-color: blueviolet; grid-area: c3;">c3</div>
    <div style="background-color: brown; grid-area: c4;">c4</div>
</div>