Modul 8: CSS Grid

lock
Bevorstehend

Erstelle komplexe 2D-Layouts mit CSS Grid

Ziele dieses Moduls
  • Sie koennen CSS Grid verwenden, um komplexe 2D-Layouts wie Foto-Galerien zu erstellen
    Anwenden

CSS Grid ist das mächtigste Layout-System in CSS. Während Flexbox für eindimensionale Layouts (Zeile oder Spalte) gedacht ist, ist Grid perfekt für zweidimensionale Layouts.

CSS Grid-Grundlagen

Wie bei Flexbox gibt es einen Container und Items. Der Container bekommt display: grid.

Die wichtigsten Properties:

  • grid-template-columns - Definiert Spalten
  • grid-template-rows - Definiert Zeilen
  • gap - Abstand zwischen Zellen
  • grid-column / grid-row - Items über mehrere Zellen spannen
/* Einfaches 3-Spalten Grid */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3 gleich breite Spalten */
    gap: 20px;
}

/* Oder kürzer mit repeat() */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Auto-fill: So viele Spalten wie Platz ist */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

/* Item über 2 Spalten spannen */
.wide-item {
    grid-column: span 2;
}

/* Item über 2 Zeilen spannen */
.tall-item {
    grid-row: span 2;
}

Die fr-Einheit

fr steht für 'fraction' (Bruchteil). 1fr bedeutet: 'nimm einen Teil des verfügbaren Platzes'.

  • 1fr 1fr 1fr - Drei gleich breite Spalten
  • 2fr 1fr 1fr - Erste Spalte doppelt so breit wie die anderen
  • 200px 1fr 1fr - Erste Spalte fix 200px, Rest flexibel

Challenge

Übung: Instagram-Style Photo Grid

Erstelle eine Foto-Galerie wie auf Instagram/Pinterest:

  • Grid mit mindestens 9 Bildern
  • Die Bilder sollen automatisch in Spalten angeordnet werden (verwende auto-fill)
  • Mindestbreite pro Bild: 250px
  • 15px Abstand zwischen Bildern
  • Special: Ein Bild soll doppelt so breit sein (2 Spalten)
  • Hover-Effekt: Beim Drüberfahren wird das Bild leicht vergrössert

Bilder-Quelle: Verwende https://picsum.photos/400/400 (verschiedene IDs für verschiedene Bilder: ?random=1, ?random=2, etc.)

/* Starter-Code für die Galerie */

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    padding: 20px;
}

.gallery img {
    width: 100%;
    height: 300px;
    object-fit: cover; /* Bild füllt den Bereich aus */
    border-radius: 8px;
    transition: transform 0.3s;
}

.gallery img:hover {
    transform: scale(1.05);
}

/* Ein Bild doppelt breit machen */
.gallery img:nth-child(5) {
    grid-column: span 2;
}

Note

Grid-Übung: Probiere cssgridgarden.com aus - ein Spiel zum Grid lernen!