CSS Grid und Flexbox: Moderne Web-Layouts

Die Kraft Moderner CSS-Layouts

CSS Grid und Flexbox sind die grundlegenden Werkzeuge für moderne Web-Layouts. Zusammen decken sie jeden Design-Bedarf ab, vom einfachsten bis zum komplexesten.

1. Flexbox: Eindimensionales Layout

Basis Flex-Container

.flex-container {
  display: flex;

  /* Richtung */
  flex-direction: row;          /* row | row-reverse | column | column-reverse */

  /* Umbruch */
  flex-wrap: wrap;              /* nowrap | wrap | wrap-reverse */

  /* Ausrichtung Hauptachse */
  justify-content: space-between; /* flex-start | flex-end | center | space-around | space-evenly */

  /* Ausrichtung Querachse */
  align-items: center;          /* stretch | flex-start | flex-end | center | baseline */

  /* Ausrichtung mehrerer Zeilen */
  align-content: flex-start;    /* stretch | flex-start | flex-end | center | space-between | space-around */

  /* Abstand zwischen Elementen */
  gap: 1rem;
}

Flex-Elemente

.flex-item {
  /* Proportionales Wachstum */
  flex-grow: 1;

  /* Proportionale Verkleinerung */
  flex-shrink: 0;

  /* Basisgröße */
  flex-basis: 200px;

  /* Kurzschreibweise: grow shrink basis */
  flex: 1 0 200px;

  /* Selbst-Ausrichtung */
  align-self: flex-end;

  /* Visuelle Reihenfolge */
  order: 2;
}

Häufige Flexbox-Muster

/* Navbar mit Logo und Menü */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

.navbar-menu {
  display: flex;
  gap: 2rem;
}

/* Karte mit Footer unten */
.card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-body {
  flex: 1; /* Nimmt verfügbaren Platz */
}

.card-footer {
  margin-top: auto; /* Nach unten schieben */
}

/* Perfekte Zentrierung */
.center-content {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Eingabefeld mit Icon */
.input-group {
  display: flex;
}

.input-group input {
  flex: 1;
}

.input-group button {
  flex-shrink: 0;
}

2. CSS Grid: Zweidimensionales Layout

Basis Grid-Container

.grid-container {
  display: grid;

  /* Explizite Spalten */
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: minmax(200px, 1fr) 3fr;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  /* Explizite Zeilen */
  grid-template-rows: auto 1fr auto;

  /* Abstand */
  gap: 1.5rem;
  row-gap: 1rem;
  column-gap: 2rem;

  /* Benannte Bereiche */
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
}

Grid-Elemente

.grid-item {
  /* Positionierung nach Linien */
  grid-column: 1 / 3;           /* Von Linie 1 bis Linie 3 */
  grid-column: span 2;          /* Belegt 2 Spalten */
  grid-row: 1 / -1;             /* Von erster bis letzter Linie */

  /* Positionierung nach Bereich */
  grid-area: header;

  /* Selbst-Ausrichtung */
  justify-self: center;         /* start | end | center | stretch */
  align-self: end;
}

/* Kurzschreibweise Positionierung */
.item {
  /* row-start / column-start / row-end / column-end */
  grid-area: 1 / 1 / 3 / 4;
}

Häufige Grid-Muster

/* Holy Grail Layout */
.page-layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

/* Automatisch responsives Grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

/* Magazin-Layout */
.magazine-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 1rem;
}

.featured {
  grid-column: span 2;
  grid-row: span 2;
}

/* Masonry-ähnlich mit Grid */
.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 10px;
  gap: 1rem;
}

.masonry-item.small { grid-row: span 20; }
.masonry-item.medium { grid-row: span 30; }
.masonry-item.large { grid-row: span 40; }

3. Subgrid (CSS Grid Level 2)

/* Kind-Elemente am Parent-Grid ausrichten */
.parent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.child-grid {
  display: grid;
  grid-column: span 3;
  grid-template-columns: subgrid; /* Erbt Parent-Spalten */
  gap: 1rem;
}

/* Nützlich für Formulare */
.form-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
}

.form-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
}

4. Fortgeschrittenes Responsive Design

/* Mobile-first mit Grid */
.responsive-grid {
  display: grid;
  gap: 1rem;

  /* Mobil: 1 Spalte */
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .responsive-grid {
    /* Tablet: 2 Spalten */
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .responsive-grid {
    /* Desktop: 3 Spalten */
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Container Queries */
.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 150px 1fr;
  }
}

/* Fluid Typography mit Grid */
.hero {
  display: grid;
  place-items: center;
  min-height: 100vh;

  h1 {
    font-size: clamp(2rem, 5vw, 4rem);
  }
}

5. Grid und Flexbox Kombinieren

/* Grid für Seitenlayout, Flex für Komponenten */
.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: 100vh;
}

.sidebar {
  display: flex;
  flex-direction: column;
}

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sidebar-footer {
  margin-top: auto;
}

.main-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  padding: 2rem;
  align-content: start;
}

/* Karte mit internem Flex */
.card {
  display: flex;
  flex-direction: column;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

Best Practices

• Verwenden Sie Flexbox für eindimensionale Layouts (Navbar, Card-Inhalt)
• Verwenden Sie Grid für zweidimensionale Layouts (Seitenlayout, Galerie)
• Bevorzugen Sie fr-Einheiten für flexible Spalten
• Verwenden Sie minmax() und auto-fit/auto-fill für intrinsives Responsive
• Kombinieren Sie Grid und Flexbox: Grid für Struktur, Flex für Komponenten

Fazit

CSS Grid und Flexbox zusammen geben Ihnen die volle Kontrolle über Layouts. Beherrschen Sie beide, um moderne, responsive und wartbare Interfaces zu erstellen.