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