CSS/Tutorials/Grid

Aus SELFHTML-Wiki
< CSS‎ | Tutorials(Weitergeleitet von Grid Layout)
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer
6x30min
Schwierigkeitsgrad
mittel
Vorausgesetztes Wissen
Grundkenntnisse in CSS


Mit dem Grid Layout Module ist es möglich, responsive zweidimensionale Layouts zu erstellen. Dabei wird ein Raster angelegt, indem sich die Kindelemente ohne feste Größenangaben und weitere CSS-Einstellungen wie position, float oder clear bequem und flexibel positionieren (lassen).

  1. Einführung
  2. Grid-Container
    • Raster und Rasterelemente
    • anonyme Rasterelemente
    • implizite Erzeugung
  3. Rasterelemente (Grid-Items)
    • Rasterfelder
    • Rasterbereiche
    • fester Footer
    • Definitionslisten
  4. Responsive Raster ohne Media Queries
    • auto-fill
    • grid-auto-flow
    • Bildergalerien
    • masonry tiles
  5. Ausrichtung von Grid-Items
    • innerhalb von Spalten
    • innerhalb von Reihen
    • gap
  6. benannte Linien und Rasterbereiche
    (Grid ohne Rechnen)
    • benannte Linien
    • grid-template-areas
      ASCII-Schemata
  7. Verschachtelte Raster
    • subgrid
    • Anwendungsbeispiele



Diese Tutorial-Reihe dient als Einstieg in Grid Layout und ist als Rundgang angelegt. Während das erste Kapitel Hintergründe erklärt, lernen Sie in den Kapiteln 2 - 6, wie Sie mit Grid Layout flexible und responsive Webseiten formatieren können.


Einstieg in Grid

Referenz[Bearbeiten]