2.1 Eigenschaft display: grid
CSS Grid Layout ist ein leistungsfähiges Layoutsystem, das es ermöglicht, komplexe Webseitengestaltungen mithilfe von Zeilen und Spalten zu erstellen. Der grundlegende Schritt bei der Arbeit mit CSS Grid ist die Erstellung eines Grid-Containers. Unten schauen wir uns an, wie man die Eigenschaft display: grid verwendet, um einen Grid-Container zu erstellen und seine grundlegenden Aspekte zu steuern.
Grundlegende Konzepte zur Erstellung eines Grid-Containers
Eigenschaft display: grid
Die Eigenschaft display: grid definiert ein Element als Grid-Container. Dies ist der Grundschritt, der es ermöglicht, alle Funktionen von CSS Grid zur Gestaltung von Elementen zu nutzen.
Beispiel:
.grid-container {
display: grid;
}
Grundlegende Elemente des Grid-Containers
Nach der Definition eines Grid-Containers mit der Eigenschaft display: grid werden alle Kindelemente dieses Containers automatisch zu Grid-Elementen. Dies ermöglicht es, deren Anordnung und Ausrichtung innerhalb des Containers zu steuern.
Beispiel:
.grid-container {
display: grid;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid-Container-Beispiel</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">Element 1</div>
<div class="grid-item">Element 2</div>
<div class="grid-item">Element 3</div>
</div>
</body>
</html>
Code-Erklärung:
.grid-container: definiert ein Element als Grid-Container mit der Eigenschaftdisplay: grid. Fügt auch einen Rahmen hinzu, um den Container visuell hervorzuheben.grid-item: definiert grundlegende Stile für die Elemente im Grid-Container, wie Hintergrundfarbe, Textfarbe, Abstände, Rahmen und Textausrichtung
2.2 Verschachtelte Grid-Container
Ein Vorteil von CSS Grid ist die Möglichkeit, verschachtelte Grid-Container zu erstellen. Dies ermöglicht es, komplexe Layouts zu schaffen, bei denen ein Grid-Element selbst zum Grid-Container für seine Kindelemente wird.
Beispiel:
.grid-container {
display: grid;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
.nested-grid-container {
display: grid;
gap: 5px;
background-color: #2980b9;
padding: 10px;
}
.nested-grid-item {
background-color: #1abc9c;
padding: 10px;
border: 1px solid #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Verschachtelte Grid-Container</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">Element 1</div>
<div class="grid-item">
<div class="nested-grid-container">
<div class="nested-grid-item">Verschachteltes Element 1</div>
<div class="nested-grid-item">Verschachteltes Element 2</div>
</div>
</div>
<div class="grid-item">Element 3</div>
</div>
</body>
</html>
Code-Erklärung:
-
.nested-grid-container: definiert einen verschachtelten Grid-Container mit der Eigenschaftdisplay: grid, und fügt Abstände zwischen den Elementen hinzu (gap: 5px) sowie Innenabstand (padding: 10px) -
.nested-grid-item: definiert grundlegende Stile für die Elemente im verschachtelten Grid-Container, wie Hintergrundfarbe, Abstände und Rahmen
2.3 Steuerung des Verhaltens des Grid-Containers
Die Eigenschaft display: grid ermöglicht auch die Verwendung zusätzlicher Eigenschaften zur Steuerung des Verhaltens des Grid-Containers. Zum Beispiel steuert die Eigenschaft grid-auto-flow die automatische Platzierung von Elementen.
Beispiel:
.grid-container {
display: grid;
grid-auto-flow: row;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid-Container mit auto-flow</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">Element 1</div>
<div class="grid-item">Element 2</div>
<div class="grid-item">Element 3</div>
<div class="grid-item">Element 4</div>
<div class="grid-item">Element 5</div>
</div>
</body>
</html>
2.4 Anwendung von Flexbox innerhalb des Grid-Containers
In manchen Fällen kann die Verwendung von Flexbox innerhalb von Grid-Elementen nützlich sein, um komplexere Layouts zu erstellen. Dies ermöglicht es, die Vorteile beider Technologien zu kombinieren.
.grid-container {
display: grid;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
.flex-container {
display: flex;
gap: 10px;
}
.flex-item {
background-color: #1abc9c;
padding: 10px;
flex: 1;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox innerhalb des Grid-Containers</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item flex-container">
<div class="flex-item">Flex Element 1</div>
<div class="flex-item">Flex Element 2</div>
</div>
<div class="grid-item">Element 2</div>
<div class="grid-item">Element 3</div>
</div>
</body>
</html>
Code-Erklärung:
.flex-container: definiert ein Grid-Element als Flex-Container mit der Eigenschaftdisplay: flex.flex-item: definiert grundlegende Stile für die Elemente im Flex-Container, wie Hintergrundfarbe, Abstände und Flexibilität (flex: 1)
GO TO FULL VERSION