CSS/Tutorials/Grid

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

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
    • Holy-Grail-Layout
    • Flexbox oder Grid?
  2. Grid-Container
    • Raster und Rasterelemente
    • anonyme Rasterelemente
    • implizite Erzeugung
  3. Rasterelemente (Grid-Items)
    • Rasterfelder
    • Rasterbereiche
    • fester Footer
  4. Responsive Raster ohne Media Queries
    • auto-fill
    • grid-auto-flow
    • Bildergalerien
    • masonry tiles
  5. benannte Linien und Rasterbereiche
    (Grid ohne Rechnen)
    • grid-template-areas
      ASCII-Schemata
    • benannte Linien
  6. Ausrichtung von Grid-Items
    • innerhalb von Spalten
    • innerhalb von Reihen
    • gap
  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.

Referenz