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

Erhalten Sie Zugriff auf diesen Kurs – mit einer kostenlosen Probeversion

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

Die wichtigsten Begriffe: Grid-Container, Grid-Items & Co.

Die wichtigsten Begriffe: Grid-Container, Grid-Items & Co.

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

Gratismonat starten Für Ihr Team erwerben

Die wichtigsten Begriffe: Grid-Container, Grid-Items & Co.

“

Bevor es mit dem Gestalten von Grid Layouts so richtig los geht, möchte ich Ihnen in aller Kürze die wichtigsten Begriffe im Überblick vorstellen. Grid-Container und Grid-Items sind die ersten beiden Vokabeln. Ein Grid-Container wird erstellt mit display: grid. Das macht das Element, das diese Deklaration bekommt zu einem Grid-Container. Und alle Kindelemente werden automatisch Grid-Items. Nach außen ist es eine Blockbox, nach innen könnte man es eine Gridbox nennen, oder einfach auch nur ein Grid. Grid basiert also wie Flexbox auf einer intakten Eltern-Kind-Beziehung, die Grundlagen, also Grid-Container und Grid-Items, das ist wirklich fast genau wie bei Flexbox mit Flex-Container und Flex-Items. Statt display: flex nutzen Sie für Grid-Layout display:grid. In einem Grid-Layout gibt es Linien. Sie sehen hier ein einfaches Raster-Layout, und jetzt kommen hier die Linien, vertikale und horizontale Linien, die das Raster aufteilen und Zeilen und Spalten voneinander trennen. Vertikal und…

Inhalt