Skip to content

V3_Grid

Jump to bottom
hzuellig edited this page Mar 2, 2026 · 2 revisions

Grid

Im Unterschied zu Flexbox ist bei Grid die Alignierung über Zeilen und Spalten möglich – also in zwei Richtungen. Durch die Platzierung im Grid ist es auch möglich, mit Weissraum im Raster zu arbeiten.



Mit Grid sind auch Überlagerungen von Elementen möglich (mit Flexbox alleine nicht).


Einführung Grid

Wei bei Flexbox wird auch bei Grid die Property display:grid für das Parent Element gesetzt. Dann wird der Raster (Anzahl und Breite von Zeilen und Spalten) definiert. Im Chrome und im Firefox kann man sich den Grid anzeigen lassen. Die Spalten und Zeilen sind durchnummeriert, die Nummern beginnen bei 1.

.parentcontainer{
    display:grid; 
    grid-template-columns: 1fr 1fr 1fr; /* 3 Spalten fr für fraction */
    /*grid-template-columns: repeat(3, 1fr); Alternative Schreibweise für oben mit repeat*/
    grid-template-rows: 1fr 1fr 1fr; /* 3 Zeilen */
    gap:10px; /*Zwischenraum */
    
}
.child{
    border:1px dotted blue;
    padding:1rem;
    margin:1rem;
}
<div class="parentcontainer">
    <div class="child special">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
</div>


Standardmässig werden die Kindelemente von links nach rechts und oben nach unten eingefüllt. Die Kindelemente können aber auch explizit platziert werden. Diese Angaben gibt man beim Kind selber ein. Die Angaben `grid-column: 1 / 3;` und `grid-row: 1 / 3;` beziehen sich auf die Nummern der Spalten und Zeilen. Das Element soll den Grid von Spalte 1 bis 3 ausfüllen. 
.parentcontainer{
    display:grid; 
    grid-template-columns: 200px 1fr 1fr; 
    grid-template-rows: 200px 1fr 1fr; /* 3 Zeilen */
}
.special {
            grid-column: 1 / 3;
            grid-row: 1 / 3;
            /* grid-area: 1 / 3 / 1 / 3; Kurzschreibweise Area row-start/col-start/row-end/col-end*/
            background-color:rgba(0,0,255,0.3)
        }


Fraction Unit fr

Grideinteilungen können mit jeder beliebigen Längeneinheit definiert werden. Grid führt auch eine zusätzliche Längeneinheit ein, um die Erstellung flexibler Einteilungen zu erleichtern. Die neue Längeneinheit fr (fraction) nimmt den verfügbaren Platz nach Abzug aller fixer Angaben und teilt ihn gemäss dem Anteil an der Summe der fr auf. Im ersten Beispiel oben ist das ein Drittel des verfügbaren Platzes pro Einheit -> es sind drei fr insgesamt und kein fixes Mass.

Im zweiten Beispiel wird fr mit fixem Mass kombiniert: vom verfügbaren Platz gehen fix 200px an die erste Spalte (bzw. Zeile). Vom restlichen Platz bekommen die zweite und dritte je die Hälfte. Ein Use Case dazu könnte ein Logo sein, dem man im Grid eine fixe Spaltenbreite zuweist. Die restlichen Spalten wären flexibel.
Ausgezeichnetes Grid Cheatsheet: https://yoksel.github.io/grid-cheatsheet/

Übungen

Praxis: Mache die vier Übungen auf Mozilla. https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grid_skills Zum Nachlesen kannst du diese Seite und das Cheatsheet benutzen.

Analog zu flexboxfroggy gibt es CSS Grid Garden:
https://cssgridgarden.com/#de

Clone this wiki locally