Was ist eigentlich CSS-Grid
CSS Grid ist ein mächtiges Layout-System in CSS, das es Entwicklern ermöglicht, komplexe Layouts für Webseiten und Webanwendungen zu erstellen. Im Gegensatz zu älteren Methoden wie float und flexbox bietet CSS Grid eine deutlich flexiblere und einfacher zu handhabende Möglichkeit, um Elemente auf einer Webseite zu positionieren und zu organisieren.
Hier sind einige der wichtigsten Eigenschaften von CSS Grid:
- Rasterstruktur: CSS Grid ermöglicht die Erstellung eines Rasters, das aus Zeilen und Spalten besteht, in dem Elemente positioniert werden können.
- Zweidimensionale Anordnung: Im Gegensatz zu flexbox, das entweder in einer Zeile oder in einer Spalte angeordnet ist, bietet CSS Grid eine zweidimensionale Anordnung, bei der Elemente sowohl entlang der Zeilen als auch der Spalten platziert werden können.
- Flexibilität: Mit CSS Grid können Entwickler flexible und komplexe Layouts erstellen, die sich automatisch an verschiedene Bildschirmgrößen und Anzeigegeräte anpassen können.
- Grid-Linien und Abstände: Entwickler können mithilfe von CSS Grid Grid-Linien und Abstände definieren, um den Abstand zwischen den Zellen und den Rasterlinien anzupassen.
- Automatische Anordnung: CSS Grid bietet verschiedene Methoden zur automatischen Anordnung von Elementen im Raster, wie zum Beispiel die Verwendung von
auto-fillundauto-fit, um Elemente basierend auf der verfügbaren Platz zu platzieren. - Überlappung: Im Gegensatz zu einigen älteren Layout-Techniken erlaubt CSS Grid auch das Überlappen von Elementen, was nützlich sein kann, um bestimmte Designanforderungen umzusetzen.
Wie funktioniert das in VS-Code?
Video-Beisipiel aus dem Netz Video ( 35 min)
Tipp: Schau dir dazu auch das große Thema „Responsive“ dazu an auf Schulhof-Programmierung. mehr
Wiederholung – Der Kumpel:
Dein Kumpel fragt dich: Du sag mal, was bedeutet eigentlich „responsiv“? Du antwortest ganz cool: „Stell dir vor du programmierst eine homepage und diese willst du ja nicht nur auf deinem Laptop cool dargestellt haben, sondern auch auf Handy und Tablets. Hier werden bestimmte Techniken angewendet, damit die Seiten responsive, also so angepasst werden können, damit sie dir auf deinem Handy und auf deinem Tablet optimal dargestellt werden.
Was war nochmals CSS ? Antwort: CSS ist eine Stylesheet-Sprache, wenn du z. B. eine homepage programmieren möchtest, so kannst du das mit HTML, für die Struktur ( HTML ist keine Programmiersprache, sondern einen Markup-Sprache) und CSS ( Cascading-Stylesheet-Sprache), machen. MIt CSS bestimmst du, wo sollen die Bilder hin, auf der homepage, wie soll der Hintergrund der Webseite aussehen etc.
Zurück zum Programmier-Erklär-Baum