Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

So erhalten Sie Zugriff auf diesen Kurs

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.

Die wichtigsten Grid-Eigenschaften auf einen Blick

Die wichtigsten Grid-Eigenschaften auf einen Blick

Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

Gratismonat starten Für Ihr Team erwerben

Die wichtigsten Grid-Eigenschaften auf einen Blick

“

Im Grid-Formatting-Context gibt es jede Menge neuer Eigenschaften, deren Namen anfangs vielleicht schlecht zu merken sind, aber man gewöhnt sich recht schnell dran. Ich möchte Ihnen hier noch eine kurze Übersicht der wichtigsten Grid-Eigenschaften zeigen. Und dann geht es zunächst um Eigenschaften für den Grid-Container. Das ist dann display: grid, muss natürlich erwähnt werden. Auch wenn es genau genommen keine Eigenschaft, sondern ein Wert ist. display:grid definiert den Grid-Formatting-Context. Mit grid-template-columns, grid-template-rows und grid-template-areas kann man eine Vorlage für das Layout erstellen. Grid-Raster, Template-Vorlage, Columns-Spalte, Rows-Zeilen und Areas für die benannten Bereiche. Damit definiert man also für den Browser, wie das Grid aussehen soll. Die Zwischenräume erstellt man mit gap, früher grid-gap genannt, und heute, seitdem es auch bei Flexbox dabei ist, nur noch gap. Oder eben explizit nur für Spalten mit column-gap oder row-gap. Soweit zu den…

Inhalt