Grid-Layout mit CSS erstellen

CSS-Grids können insbesondere bei der Darstellung von Daten auf responsiven Webseiten helfen. Grids in CSS funktionieren ähnlich wie Tabellen in HTML, sind aber deutlich flexibler. Daten, die sich in einem Grid befinden, können zum Beispiel ihre Spaltenanzahl je nach Bildschirmgröße ändern, um auf allen möglichen Bildschirmgrößen eine optimale Darstellung zu gewährleisten.

Einfache Tabelle

<div class="grid-container">
    <div>
        Zeile 1 Spalte 1
    </div>
    <div>
        Zeile 1 Spalte 2
    </div>
    <div>
        Zeile 2 Spalte 1
    </div>
    <div>
        Zeile 2 Spalte 2
    </div>
</div>
<style>
    .grid-container {
        display: grid;
        grid-template-columns: 50% 50%;
    }

    .grid-container > div {
        border: 1px dashed #ff0000;
    }
</style>

Hiermit haben wir eine Tabelle mit zwei Spalten definiert. Dabei haben die beiden Spalten keine festen Maße sondern passen sich flexibel an den verfügbaren Platz an.

Wenn nun die Dartstellung für einen Smartphone-Bildschirm optimiert werden soll, kann man mit einer einfachen Media-Query die Spaltenanzahl reduzieren.

@media (max-width: 400px) {
    .grid-container {
        grid-template-columns: 100%;
    }
}
    

Grid-Eigenschaften: Unterscheidung zwischen Container und Elementen

Bei den verfügbaren CSS-Grid-Eigenschaften unterscheidet man zwischen Container- und Kind-Element-Eigenschaften. Im Beispiel oben haben wir nur Eigenschaften für den Container (.grid-container) festgelegt. Die Kind-Elemente sind in diesem Fall die einzelnen ‹div›-Elemente inmerhalb dieses Containers.

Grid-Eigenschaften für Container

Wir haben bereits ein zweispaltiges Layout erzeugt. Mit grid-template-columns und grid-template-rows lassen sich Anzahl, sowie Platz der jeweiligen Spalten und Zeilen bestimmen. Mit grid-gap lassen sich außerdem noch die Abstände zwischen den Zeilen und Spalten eines Grids festlegen.

.grid-container {
    display: grid;
    grid-template-columns: 20% 20% auto; /* drei Spalten */
    grid-template-rows: 200px 100px; /* zwei Zeilen */
    grid-gap: 40px 10px; /* Zeilenabstand Spaltenabstand */
}
    

Grid-Eigenschaften für Kindelemente

Für einzelne Kindelmente lässt sich zum Beispiel deren Ausdehnung und Position bestimmen:

.grid-container > div:nth-child(3) {
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 3;

}
    

Wir können aber auch die Position eines Elements innerhalb des ihm zur Verfügung stehenden Bereichs verändern. Hiermit positionieren wir das Element Nummer 3 genau in der Mitte des Bereichs.

.grid-container > div:nth-child(3) {
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 3;
    align-self: center;
    justify-self: center;
}
    

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project