CSS/Tutorials/Grid

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).

• 

  Einführung in Grid

  anhand von Beispielen

  • Holy-Grail-Layout
  • Mehrspaltenlayout mit Navigation
  • Flexbox oder Grid?
   
• Implizite und explizite Erzeugung von Rastern
  • Raster und Rasterelemente
  • implizite Erzeugung
  • Rasterbereiche
   
• 

  Responsive Raster
  ohne Media Queries
  • auto-fill
  • grid-auto-flow: dense
  • masonry tiles
   
• Benannte Linien
  und Rasterbereiche

  Grid ohne Rechnen!

   
• Ausrichtung von Grid-Items
  
   
• Verschachtelte Raster
  mit subgrid
   

• Einstieg in Grid
• Einführung

Referenz

• grid
  • grid-auto-columns
  • grid-auto-flow
  • grid-auto-rows
  • grid-template
    • grid-template-areas
    • grid-template-columns
    • grid-template-rows

• grid-area
  • grid-column
    • grid-column-start
    • grid-column-end
  • grid-row
    • grid-row-start
    • grid-row-end

• place-content (Ausrichtung)
  • align-content
  • justify-content
• place-items
  • align-items
  • justify-items
• place-self
  • align-self
  • justify-self

• gap (Abstände)
  • column-gap
  • row-gap