CSS/Tutorials/Grid

Aus selfHTML
Zur Navigation springenZur Suche springen

Informationen zu diesem Text

Lesedauer
6x45min
Schwierigkeitsgrad
mittel
Vorausgesetztes Wissen
Grundkenntnisse in
• HTML
• 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
    • subgrid
    • fester Footer
  3. Rasterelemente (Grid-Items)
    • Rasterfelder
    • Rasterbereiche
  4. benannte Linien und Rasterbereiche (Grid ohne Rechnen)
    • benannte Linien
    • grid-template-areas

  5. Responsive Raster ohne Media Queries
    • Responsivität ohne Media Queries
    • auto-fill
    • grid-auto-flow
  6. Ausrichtung von Grid-Items
    • innerhalb von Spalten
    • innerhalb von Reihen
    • gap


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.


Referenz