Grid Test

Die "grid-template-columns" Eigenschaften

Die verfügbaren Werte:

grid-template-columns:
none;
auto;
max-content;
min-content;
length;
initial;
inherit;

none:

HTML:
<div id="test-div">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
    <div class="item4">4</div>
    <div class="item5">5</div>
    <div class="item6">6</div>
</div>

CSS:
.test-div {
    display: grid;
    grid-template-columns: none;
    grid-gap: 1em;
    background-color: #d1d1d1;
    padding: 1vw;
}

.test-div > div {
    background-color: white;
    text-align: center;
    padding: 1rem;
    font-size: 1.4rem;
    border-radius: 0.5vw;
}

none; ist der Defaultwert und erzeugt keine Columns.

Beispiel: grid-template-columns: none;

auto:

CSS:
.test-div {
    grid-template-columns: auto;
    }

auto; teilt den vorhandenen Platz für alle Grid-Kinder gleichmässig auf.

Leider sieht man das im folgenden Beispiel nicht weil "nur" eine Spalte (mit auto) angegeben wurde. Der Vollständigkeit halber ;-)

Beispiel: grid-template-columns: auto;

auto auto auto:

CSS:
.test-div {
    grid-template-columns: auto auto auto;
    }

auto auto auto; Erzeugt nun 3 Spalten und teilt den vorhandenen Platz für alle 6 Grid-Kinder gleichmässig auf. Die zusätzliche "row" wird vom Grid Layoutsystem automatisch erzeugt

auto 150px auto 250px;:

CSS:
.test-div {
    grid-template-columns: auto 150px auto 250px;
    }

auto 150px auto 250px; erzeugt 4 Spalten. Die Werte sind in den Kästchen angegeben.

Die Kästchen in den Spalten mit 200px und 250px verändern sich nicht mehr. Dies gilt nun allerdings auch für die gesamte Spalte von oben nach unten. Also auch die Folgekästchen weiter unten.

Die Kästchen mit auto verhalten sich elastisch und teilen sich den verfügbaren Platz brüderlich auf.

max-content 1fr 1fr;:

CSS:
.test-div {
    grid-template-columns: max-content 1fr 1fr;
    }

max-content 1fr 1fr;

Der weiteste Inhalt bestimmt die Grösse der Spalte und fliesst bei Platzmangel über!
Diesen Sinn verstehe ich momentan nicht?

Ok, könnte für Bilder oder Videos interessant sein.

min-content min-content 1fr;:

CSS:
.test-div {
    grid-template-columns: min-content min-content 1fr;
    }

min-content 1fr 1fr;

Der kleinste zusammenhängende Inhalt bestimmt die Breite der Spalte. Bei Spalte 1 ist es das Wort "BreiteBreiteBreite".
Auch hier kann es zu Overflow kommen.

length: Sammelbegriff für alle Längenangaben

Hiermit sind alle CSS-Angaben einer Länge gemeint, z.B. vw, rem, em, fr, px, % usw.

CSS:
.test-div {
    grid-template-columns: 20vw 150px 25% 1fr;
    }

20vw 150px 25% 1fr;

initial:

initial setzt das Verhalten eines Elements auf seine ursprünglichen Default-Werte zurück.

CSS:
.test-div {
    grid-template-columns: 20vw 150px 25% 1fr; /* Ich werde von der nachfolgenden Anweisung überschrieben und somit ignoriert */
    grid-template-columns: initial; /* Die letzte Anweisung überschreibt die vorher, irgendwo weiter oben, Stehende */
    }

Alt: 20vw 150px 25% 1fr;
Neu: initial (Browser Default ist none)

Grid-Eigenschaften und mathematische Funktionen kombinieren.

Das ist vielleicht schwer verständlich aber auch interessant ;-) Ich lese mir das auch nur an!

Mathematische Funktionen gibt es in CSS nicht nur mit calc().
min(), max() und clamp() ermöglichen kompliziertere Kombinationen in CSS. Das klingt jetzt nicht so prickeld aber wir können uns das ja mal anschauen.

min(), max() und die Konfusion

Entgegen unserer Logik bedeutet min() die Maximalgrösse eines Elements und max() die Minimalgrösse.

min():

CSS:
.test-div {
    grid-template-columns: min(100%, 700px);
    }

min(100%, 700px);

Werde nicht grösser als 700px, Basta!!
Sei aber, bei weniger als 700px, 100% breit und bleibe so auch beim Weiterschrumpfen.

max():

CSS:
.test-div {
    grid-template-columns: max(100%, 700px);
    }

max(100%, 700px);

Werde nicht kleiner als 700px sonst wird ein Overflow erzeugt!
Bei >700px nehme dann die gesamte verfügbare Breite ein.

max(50vw, 400px);

Achtung: Bei vw ist die gesamte Bildschirmgrösse gemeint! Also der gesamte Monitor.
Nehme 50% des Viewport ein und gehe niemals unter 400px. Ansonsten gibt es einen Overflow.

Grid: Automatische Einsortierung

Mit auto-fit / auto-fill und gleichzeitig die passenden Grössen mit minmax() dazu geben.

Keine Angaben für den Grid-Inhalt?

Wenn der Inhalt eines Grid-Elternelements keine CSS-Anweisung für die Einordnung seiner Grid-Kinder bekommt, dann tritt eine automatische Sortierung (Auto-placement) ein.

Die Defaulteinstellung ist, die Kinder in einer Reihe, von links nach rechts, einzufügen. Ist die Reihe voll und keine weiteren Reihen explizit angegeben, dann werden automatisch neue implizite Reihen erstellt.

Die Höhen der automatisch erzeugten impliziten Reihen:

Die Höhe der erzeugten implizierten Reihen erfolgt automatisch derart, dass der Inhalt keinen Overflow auslöst.

Beispiel: Anpassung impliziter Reihen

CSS:
.test-div {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    Es sind keine Rows angegeben.
    }

Ohne entsprechende Angaben passen sich die Rows dem Inhalt an:

Automatische Einordnung in Grid

grid-auto-rows: 140px;

CSS:
.test-div {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 140px;
    }

Mit grid-auto-rows: 140px; werden sämtliche Reihen auf eine Höhe von 140px eingestellt:

Automatische Einordnung in Grid

grid-auto-rows: minmax();

Mit grid-auto-rows: minmax(); haben die Reihen eine Mindeshöhe und wachsen dann bei einem grösseren Inhalt

CSS:
.test-div {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(100px, auto);
    }

Mit grid-auto-rows: minmax(100px, auto); haben die Reihen eine Mindesthöhe von 100px.

Bei grösserem Inhalt passt sich die Reihe automatisch in der Höhe an.

Automatische Einordnung in Grid

grid-auto-rows: 200px 150px 100px

Mit grid-auto-rows: 200px 150px 100px; haben die Reihen unterschiedliche feste Mindeshöhen.

CSS:
.test-div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 200px 150px 100px;
    }

Mit grid-auto-rows: 200px 150px 4.75em; haben die jeweiligen Reihen eine feste Höhe. (ausser em)

Wann Flexbox und wann Grid einsetzen?

Ich habe mich nun durch viele Quellen durchgearbeitet und bin zu der Erkenntnis gelangt, dass die vielen Gestaltungsmöglichkeiten ein Arbeiten mit Grid so richtig komplizieren. Die Eingangsfrage wird oftmals mit "sowohl" als "auch" beantwortet.

Ich werde Grid vorerst mal bei sich wiederholenden Einsortierungen wie Bildergallerien oder "Cards" ausprobieren. Auch weil es sich bei der Mobilansicht gut anpasst.

Ein paar Spielereien:

Cards für ähnliche Inhaltssammlungen

HTML:
<div class="grid-beispiel-01">
    <div class="item">Eins</div>
    <div class="item">Zwei</div>
    <div class="item">Drei</div>
    <div class="item">Vier</div>
    <div class="item">Fünf</div>
    <div class="item">Sechs</div>
</div>

CSS:
.grid-beispiel-01 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px),1fr));
    
    grid-template-columns: Bedeutung:
        repeat( /*So oft wiederholen bis alle Items eingeordnet sind */
        auto-fit, /*Verbreitert die columns wenn noch leerer Platz vorhanden ist*/
        minmax /*minmax Ein Bereich grösser oder gleich (min(100%, 350px)*/
                /*maxmax Ein Bereich kleiner oder gleich 1fr*/
        (min(100%, 350px), /* Ich bin min...*/
        1fr));             /*.. und ich bin max*/
    gap: 20px;
    }
    
    

Mit Bildern:

Card title

Card title

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas eligendi itaque odio aliquid excepturi vel corrupti deserunt veniam fuga perspiciatis! Nihil obcaecati quos similique consequatur dolore. Natus, corrupti.

Card title

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas eligendi itaque odio aliquid excepturi vel corrupti deserunt veniam fuga perspiciatis! Nihil obcaecati quos similique consequatur dolore. Natus, corrupti.

Card title

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas eligendi itaque odio aliquid excepturi vel corrupti deserunt veniam fuga perspiciatis! Nihil obcaecati quos similique consequatur dolore. Natus, corrupti.

Card title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, iusto consectetur. Corporis consequatur architecto consequuntur blanditiis delectus sed aut, sint nihil ipsam voluptates quasi iure accusamus veniam quia soluta reprehenderit, quo quos!

Card title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum ut repellat odit dolorem modi sapiente praesentium voluptas ullam placeat nostrum enim eligendi, commodi vitae recusandae in expedita architecto ex labore rem! Commodi, modi.

Card title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo repellendus ex obcaecati facilis voluptatum corporis suscipit enim debitis quisquam!

Article