CSS/Eigenschaften/grid

Aus selfHTML
Zur Navigation springenZur Suche springen

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

    {{#fornumargs:nr|name|{{#vardefine:class|}}{{#vardefine:classext|}}{{#vardefine:ext|-Extended}}
  • [[Datei:Iconset{{#var:ext}}.png|alt={{#explode:{{#var:classext|{{#var:class|leer+Leer}}}}|+|-1}}|{{#explode:{{#var:classext|{{#var:class|leer+Leer}}}}|+|-1}}]]
  • {{#vardefine:class}}{{#vardefine:classext}}}}

Details: caniuse.com

Einstieg in das Grid Layout (Tutorial-Reihe)
  1. Einführung
  2. Grid-Container
    • Raster und Rasterelemente
    • anonyme Rasterelemente
    • implizite Erzeugung
  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

Referenz

Weblinks

Artikel

englisch

Beachten Sie: Verwendet veraltete Syntax!

Polyfill:

bekannte Browserbugs: