Learn-Program
Zurück zu CSS

CSS

Layout

Flexbox und Grid sind die modernen Layout-Systeme: Flexbox für Reihen und Spalten, Grid für zweidimensionale Raster.

display und position

display bestimmt das grundlegende Layoutverhalten: block, inline, flex, grid oder none.

position steuert Sonderfälle: relative verschiebt relativ zur Normalposition, absolute relativ zum positionierten Vorfahren, fixed relativ zum Viewport und sticky haftet beim Scrollen.

<display><position>
Sticky Header
header {
  position: sticky;
  top: 0;
}

Flexbox

display: flex ordnet Kinder in einer Reihe oder Spalte an.

justify-content richtet entlang der Hauptachse aus, align-items entlang der Querachse.

gap definiert den Abstand zwischen den Items, ohne margin-Tricks.

<flex><justify-content><align-items><gap><flex-direction>
Zentrieren mit Flexbox
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

Grid

display: grid spannt ein zweidimensionales Raster auf.

grid-template-columns definiert die Spalten, die fr-Einheit verteilt den freien Platz.

Mit repeat() und minmax() entstehen flexible Raster, die sich an den Platz anpassen.

<grid><grid-template-columns><fr><repeat()>
Karten-Raster
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

Fortschritt

Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.