1.1 Grundprinzipien von Grid Layout
CSS Grid Layout ist ein mächtiges Tool zur Erstellung von komplexen und anpassungsfähigen Layouts. Es bietet Entwicklern ein zweidimensionales Rastersystem zum Platzieren von Elementen und erleichtert so die Erstellung sowohl einfacher als auch komplexer Layouts. Betrachten wir die grundlegenden Konzepte und die Syntax von CSS Grid, ohne uns in spezifische Eigenschaften zu vertiefen.
Grundlegende Konzepte von CSS Grid
-
Grid-Container und Grid-Elemente:
-
Grid-Container ist ein Element, das
display: gridenthält. Dieses Element wird zum Raster-Container, und alle seine unmittelbaren Kindelemente werden zu Grid-Elementen - Grid-Elemente sind die unmittelbaren Kindelemente des Grid-Containers, die im Raster platziert werden
-
Grid-Container ist ein Element, das
-
Rasterachsen:
- Hauptachse (inline axis) und Blockachse (block axis): Grid unterstützt zwei Achsen zur Platzierung von Elementen – die Hauptachse und die Blockachse. Standardmäßig verläuft die Hauptachse horizontal und die Blockachse vertikal
-
Rasterzellen (Grid Cells):
- Rasterzellen sind die grundlegenden Blöcke, die an den Schnittpunkten von Reihen und Spalten entstehen. Jedes Grid-Element besetzt eine oder mehrere Zellen
-
Rasterlinien (Grid Lines):
- Rasterlinien sind horizontale und vertikale Linien, die Reihen und Spalten trennen. Sie werden verwendet, um Elemente relativ zum Raster zu platzieren
-
Rasterbereiche (Grid Areas):
- Rasterbereiche sind benannte Bereiche des Rasters, die durch das Zusammenführen mehrerer Zellen erstellt werden. Sie ermöglichen es, Zellen zu gruppieren und Elemente in bestimmten Bereichen zu platzieren
1.2 Syntaxelemente
Grundlegende Syntaxelemente von CSS Grid
1. Erstellen eines Grid-Containers:
.container {
display: grid; /* oder display: inline-grid */
}
2. Bestimmen der Rasterstruktur:
CSS
.container {
display: grid;
grid-template-columns: 100px 200px 100px; /* Bestimmt drei Spalten mit unterschiedlicher Breite */
grid-template-rows: 50px 100px; /* Bestimmt zwei Reihen mit unterschiedlicher Höhe */
}
3. Zusammenführen von Zellen mit grid-area:
CSS
.item1 {
grid-area: 1 / 1 / 2 / 4; /* Das Element belegt die erste Reihe und die ersten drei Spalten */
}
4. Automatisches Platzieren von Elementen:
CSS
.container {
display: grid;
grid-auto-rows: minmax(100px, auto); /* Legt die Mindesthöhe der Reihen fest */
}
1.3 Beispiele
Ein einfaches Layout mit CSS Grid:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Beispiel</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
gap: 10px;
}
.item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
Erklärung:
- Der Container .container legt drei Spalten fest, wobei die erste und die dritte den gleichen Anteil des verfügbaren Platzes einnehmen, und die zweite doppelt so viel
- Es werden zwei Reihen mit fester Höhe festgelegt
- Die Eigenschaft gap legt den Abstand zwischen den Rasterzellen fest
GO TO FULL VERSION