Grid
Das Schachbrett der Layout-Magie
CSS Grid ist wie ein Schachbrett, auf dem du die Kontrolle über jedes einzelne Element hast – als wärst du der Großmeister der Layout-Welt. Flexbox ist gut, um Elemente in einer Linie aufzustellen, aber Grid? Grid gibt dir die Macht über zwei Dimensionen. Du kannst Elemente in Zeilen und Spalten herumschieben, als würdest du ein Spielbrett voller Figuren lenken, die genau dort landen, wo du es willst.
Perfekt für die Kontrollfreaks unter den Webdesignern! Hier hat alles seinen exakten Platz, nichts steht krumm, nichts rutscht aus der Reihe. Ob auf winzigen Bildschirmen oder gigantischen Monitoren, Grid sorgt dafür, dass dein Layout so ordentlich aussieht, als hätte es ein perfektionistischer Architekt mit magischen Fähigkeiten entworfen.
Das Schachbrett der Webentwicklung
Reihe für Reihe, Spalte für Spalte – endlich Ordnung ohne Kopfschmerzen!
Grid-Container und Grid-Items
Die Meister der flexiblen Anordnung
Bevor du mit Grid zauberst, musst du den richtigen Rahmen schaffen. Der Grid-Container ist wie das Spielfeld deines Layouts, und die Grid-Items sind die Figuren, die du auf diesem Spielfeld bewegst. Erkläre dem Container, dass er ab jetzt ein Grid ist – und schon stehen dir die magischen Kräfte zur Verfügung! Allerdings ordnen sich die Elemente hier noch nicht automatisch an, du musst erst das Schachbrett verstehen und bauen.
.container {
display: grid;
}Gemeinsame CSS-Befehle
für Flexbox und Grid
gap: Definiert den Abstand zwischen den Elementen
align-items: Richtet die Kinder-Elemente entlang der vertikalen Achse (Cross-Axis) im aus.
justify-content: Bestimmt die horizontale Ausrichtung (Main-Axis) der Kinder-Elemente im Container.
align-self: Richtet ein einzelnes Kind-Element unabhängig von den anderen aus.
order: Ändert die visuelle Reihenfolge von Kind-Elementen.
place-items: Kombiniert align-items und justify-items in einem einzigen Befehl. Beispiel: place-items: center;
place-content: Kombiniert align-content und justify-content.
Beispiel: place-content: center space-between;
auto (als Wert für Positionierung)
Kann sowohl bei Grid als auch bei Flex verwendet werden, um Elemente automatisch nach Layout-Regeln auszurichten.
Die Magie der Fraktionen
Das Schachbrett bauen
Im CSS Grid sind Fraktionen (fr) das Geheimnis hinter der flexiblen Aufteilung deines Layouts. Stell dir vor, du verteilst den Platz wie ein magischer Kuchen – die Fraktionen bestimmen, wie groß jedes Stück wird. Mit fr kannst du ganz leicht festlegen, wie viel Platz jede Spalte oder Reihe erhält, ohne dich um feste Maße kümmern zu müssen. Mit repeat(3, 1fr); erstellst du drei gleich große Spalten, wobei jede Spalte einen gleichmäßigen Anteil (1fr) des verfügbaren Platzes im Grid-Container einnimmt. Es ist die perfekte Mischung aus Ordnung und Flexibilität.
.container {
display: grid;
grid-template-columns: 1fr 2fr 3fr;
}
Items genau platzieren
Kein Schachbrett ohne Regeln
Im Grid gibt es unsichtbare Linien, die alles zusammenhalten. Diese Grid-Linien trennen Spalten und Reihen, und du zählst sie von links nach rechts und oben nach unten, immer beginnend bei 1. Wenn du ein Element über mehrere Spalten oder Reihen erstrecken möchtest, kannst du diese Linien wie Markierungen auf einer Schatzkarte nutzen. Indem du die Liniennummern angibst, steuerst du genau, wo jedes Element landet. So schaffst du präzise Layouts mit viel Spielraum für Kreativität!
.item {
grid-column: 1 / 4;
grid-row: 2 / 3;
}In dieser Lektion hast du gelernt…
- Wie du mit
display: grid;einen Grid-Container definierst, um ein flexibles Layout zu erstellen. - Warum
gapfür Abstände zwischen Grid-Items sorgt, ohne zusätzliche Margins oder Paddings zu setzen. - Weshalb
frals Einheit für flexible Spaltenbreiten genutzt wird, um Platz dynamisch aufzuteilen, ohne feste Werte festlegen zu müssen. - Wie du mit
grid-template-columnsundrepeat()ein Raster erstellst, das sich an verschiedene Bildschirmgrößen anpasst. - Wozu Grid-Linien dienen, um Elemente präzise innerhalb des Rasters zu positionieren und gezielt über mehrere Spalten oder Reihen zu erstrecken.
Das Labyrinth der Gittermagie
Tief im Labyrinth der Magie wartet ein Puzzle, das nur mit der Macht des CSS-Grids gelöst werden kann. Die verborgenen Kammern und ihre magischen Türen öffnen sich erst, wenn du die Räume in ein präzises Raster setzt. Beherrsche die Gittermagie, um Boxen gleichmäßig zu verteilen, ihre Reihen und Spalten zu bestimmen und die versteckten Geheimnisse ans Licht zu bringen. Wer die Kunst des Grids meistert, wird das Labyrinth durchschreiten – und vielleicht sogar das eine oder andere Monster beeindrucken.
Deine Aufgabe: Die Anwendung von CSS-Grid
Gestalte die Räume so, dass sie aussehen wie in der Abbildung
- Grundstruktur mit Display Grid:
Verwende display: grid im .grid-container, um die Boxen als Grid-Elemente zu definieren. - Grid Columns festlegen:
Setze grid-template-columns auf repeat(3, 1fr), um das Grid in drei gleich große Spalten aufzuteilen. - Grid Gap verwenden:
Füge grid-gap: 20px; hinzu, um Abstände zu definieren. - Platzierung der Items mit Grid Column und Grid Row:
Verwende grid-column und grid-row, um bestimmte Boxen gezielt zu platzieren, und teste verschiedene Werte, um die Boxen an unterschiedliche Positionen zu setzen.
Öffne Visual Studio Code und lasse diese Worte auf der Seite erscheinen. Oder probiere es direkt hier im Editor aus!
/* Platzierung einzelner Boxen */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.box1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
.box4 {
grid-column: 2 / 4;
grid-row: 2 / 3;
}
grid-auto-flow
Die unsichtbare Magie
In der Welt des CSS Grid musst du nicht immer jedes einzelne Element exakt platzieren. Manch-mal möchtest du einfach, dass die Elemente automatisch ihren Platz im Raster finden. Genau dafür gibt es grid-auto-flow. Dieser Befehl bestimmt, wie die Grid-Items automatisch in das Raster eingefügt werden, wenn du sie nicht manuell positionierst.
Standardmäßig werden die Items von links nach rechts und dann von oben nach unten gefüllt, das nennt sich Zeilenfluss (row). Mit grid-auto-flow kannst du dieses Verhalten ändern und die Items zum Beispiel zuerst in die Spalten fließen lassen.
.container {
display: grid;
grid-template-columns: repeat(3, 2fr);
grid-auto-flow: row;
}Die möglichen Werte sind:
row: Die Items werden Zeile für Zeile gefüllt (Standard).
column: Die Items werden Spalte für Spalte gefüllt.
dense: Lücken im Raster werden gefüllt, indem kleinere Items in freie Plätze springen, um den Raum effizient zu nutzen.
auto-fit
Ein flexibles Grid für jede Gelegenheit
Mit dieser Anweisung zauberst du ein Grid, das sich intelligent an den verfügbaren Platz anpasst. auto-fit stellt sicher, dass so viele Spalten wie möglich entstehen, ohne dass sie sich gegenseitig in die Quere kommen.
.container {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}Jede Spalte ist mindestens 200 Pixel breit, und dank minmax(200px, 1fr) wächst sie, wenn mehr Platz da ist, gleichmäßig auf bis zu 1fr, also einen Teil des freien Platzes. Das Ergebnis: Ein flexibles Layout, das automatisch den Raum effizient füllt und dabei stets schön geordnet bleibt – ganz ohne zusätzlichen Aufwand!
grid-template-areas
Der Zauber der benannten Bereiche
Stell dir vor, du baust ein Haus und jeder Raum hat einen Namen: „Küche“, „Wohnzimmer“, „Schlafzimmer“. Mit grid-template-areas machst du genau das für dein Grid: Du gibst jedem Abschnitt einen Namen, wie z.B. „header“, „sidebar“, „content“ und „footer“ – und ordnest diese Bereiche logisch im Raster an. Das Ergebnis ist ein klares, benutzerfreundliches Layout, das sich leicht pflegen und anpassen lässt.
Mit diesem Befehl kannst du sowohl einfache als auch komplexe Layouts erstellen, ohne dich in detaillierten Zahlen und Spaltenbreiten zu verlieren. Besonders praktisch ist es, wenn du über mehrere Spalten und Zeilen hinweg Elemente verteilen möchtest, denn die Namen der Bereiche machen das Layout sofort verständlich.
Wie funktioniert’s?
- Der header-Bereich breitet sich über alle drei Spalten der ersten Zeile aus, wie ein Banner am Seitenanfang.
- Die sidebar bleibt in der linken Spalte und läuft über zwei Zeilen.
- Der content nimmt die mittleren beiden Spalten ein und erstreckt sich ebenfalls über zwei Zeilen und nimmt in der dritten Zeile zusätzlich in der zweiten Spalte Platz ein
- Der ad-Bereich erscheint in der dritten Spalte, jedoch nur in der dritten Zeile.
- Der footer breitet sich zum Schluss wie ein Fundament über die gesamte Breite der letzten Zeile aus.
Die benannten Bereiche helfen dir dabei, dein Layout sowohl lesbar als auch flexibel zu halten.
Genau das Richtige für ein effizientes und dennoch stilvolles Design!
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar content content"
"sidebar content ad"
"footer footer footer";
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.ad {
grid-area: ad;
}
.footer {
grid-area: footer;
}In dieser Lektion hast du gelernt…
- Wie
grid-auto-flowden Fluss der Grid-Items steuert, damit sie automatisch in Zeilen oder Spalten eingefügt werden. - Weshalb
denseLücken im Grid effizient füllt, indem kleinere Elemente nachrücken, um ungenutzten Platz optimal zu nutzen. - Auf welche Weise
auto-fitein flexibles Layout erzeugt, indem es so viele Spalten wie möglich erstellt, ohne dass sich die Inhalte überschneiden. - Warum
minmax()in Kombination mitauto-fitfür responsive Designs ideal ist, um Spaltenbreiten zwischen einem Minimum und Maximum automatisch anzupassen. - Wie du mit
grid-template-areasbenannte Bereiche erstellst, um dein Grid übersichtlicher und leichter verständlich zu strukturieren. - Weshalb
grid-areadir erlaubt, Elemente intuitiv einem Bereich zuzuweisen, sodass du ohne komplexe Zahlenangaben ein sauberes Layout definieren kannst. - Wie du mit
grid-template-areasflexible Layouts baust, die sich schnell anpassen lassen, ohne dass du jedes Element einzeln ausrichten musst.
Die Ordnung der Gitterfelder
In den finsteren Tiefen des Labyrinths lauert ein Geheimnis: magische Räume, die nur sichtbar werden, wenn ihre Grid Areas richtig beschworen werden. Diese Felder, verborgen in den Spalten und Reihen des Rätsels, können ihre Form und Größe verändern – aber nur, wenn du die Gittermagie meisterst. Ordne sie geschickt an, lass sie sich über mehrere Bereiche erstrecken, und sieh zu, wie sie den verborgenen Pfad enthüllen. Wer die Gitterfelder beherrscht, öffnet die Tore zur Freiheit – oder zumindest zur nächsten Kammer voller Abenteuer.
Deine Aufgabe: Die Anwendung von Grid Areas
Gestalte die Felder so, dass sie aussehen wie in der Abbildung
- Grundstruktur mit Grid Areas erstellen:
Verwende grid-template-areas, um die Bereiche header, sidebar, main und footer zu definieren und ihnen feste Positionen im Grid zuzuweisen. - Spalten und Zeilen konfigurieren:
Setze grid-template-columns und grid-template-rows, um das Grid in drei Spalten und drei Reihen zu unterteilen. Achte darauf, dass manche Bereiche sich über mehrere Spalten oder Reihen erstrecken. - Abstände und Größe des Grids anpassen:
Füge gap hinzu, um Abstände zwischen den Grid-Elementen zu erzeugen, und setze eine feste Höhe (70vh), um das Grid über die gesamte Fenster-höhe zu erstrecken.
Öffne Visual Studio Code und lasse diese Worte auf der Seite erscheinen. Oder probiere es direkt hier im Editor aus!
/* Grundlegende Grid-Einstellung */
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
gap: 20px;
height: 70vh;
padding: 20px;
border: 2px solid darkgreen;
}
/* Grundlegende Gestaltung der Boxen */
.box {
padding: 20px;
color: white;
background-color: darkblue;
border: 1px solid navy;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
/* Bereiche definieren */
.header {
grid-area: header;
background-color: darkgreen;
}
.sidebar {
grid-area: sidebar;
background-color: forestgreen;
}
.main {
grid-area: main;
background-color: lightseagreen;
}
.footer {
grid-area: footer;
background-color: olive;
}