10.1 Kombinieren mit Media Queries
CSS Grid Layout bietet coole Werkzeuge zum Erstellen von komplexen und anpassungsfähigen Layouts. Die Kombination von CSS Grid mit Media Queries ermöglicht es, Layouts zu erstellen, die sich an verschiedene Bildschirmgrößen und Geräte anpassen. Schauen wir uns an, wie man Media Queries zusammen mit CSS Grid verwendet, um flexible und adaptive Webseiten zu erstellen.
Grundkonzepte von Media Queries
Media Queries ermöglichen die Anwendung unterschiedlicher CSS-Stile, abhängig von den Geräteeigenschaften, wie z.B. Bildschirmbreite, Bildschirmhöhe, Bildschirmorientierung und andere. In Kombination mit CSS Grid ermöglichen Media Queries die Änderung der Struktur und Anordnung der Elemente abhängig von der Bildschirmgröße.
Syntaxis der Media Queries:
@media (Bedingung) {
/* Stile, die bei Erfüllung der Bedingung angewendet werden */
}
Wo „Bedingung“ die Bedingung ist, unter der die Stile angewendet werden. Am häufigsten werden Bedingungen verwendet, die mit der Bildschirmbreite zusammenhängen, wie max-width und min-width.
10.2 Änderung der Spaltenanzahl
Beispiel für eine vollständige Implementierung (Änderung der Spaltenanzahl abhängig von der Bildschirmbreite):
/* Basisstil für alle Bildschirme */
.grid-container {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
/* Für Bildschirme breiter als 600px */
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(2, 1fr); /* Zwei Spalten */
}
}
/* Für Bildschirme breiter als 900px */
@media (min-width: 900px) {
.grid-container {
grid-template-columns: repeat(3, 1fr); /* Drei Spalten */
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anpassbares Layout mit CSS Grid</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 class="grid-item">Element 6</div>
</div>
</body>
</html>
Erklärung des Codes:
- Basisstil: erstellt einen Grid-Container mit einer Spalte für alle Bildschirme
- Media Query für Bildschirme breiter als 600px: ändert das Layout auf zwei Spalten
- Media Query für Bildschirme breiter als 900px: ändert das Layout auf drei Spalten
10.3 Abhängigkeit von der Bildschirmbreite
Beispiel für eine vollständige Implementierung (Änderung der Platzierung von Elementen abhängig von der Bildschirmbreite):
/* Basisstil für alle Bildschirme */
.grid-container {
display: grid;
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
gap: 10px;
}
.header {
grid-area: header;
background-color: #2ecc71;
padding: 20px;
text-align: center;
}
.sidebar {
grid-area: sidebar;
background-color: #3498db;
padding: 20px;
text-align: center;
}
.main {
grid-area: main;
background-color: #9b59b6;
padding: 20px;
text-align: center;
}
.footer {
grid-area: footer;
background-color: #e74c3c;
padding: 20px;
text-align: center;
}
/* Für Bildschirme breiter als 600px */
@media (min-width: 600px) {
.grid-container {
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 1fr 3fr;
}
}
/* Für Bildschirme breiter als 900px */
@media (min-width: 900px) {
.grid-container {
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 1fr 2fr;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anpassbare Platzierung mit CSS Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
Erklärung des Codes:
- Basisstil: erstellt einen Grid-Container mit vier Reihen und einer Spalte für alle Bildschirme
- Media Query für Bildschirme breiter als 600px: ändert das Layout auf zwei Spalten und ändert die Platzierung der Bereiche: Header nimmt zwei Spalten ein, Hauptinhalt und Sidebar nehmen je eine Spalte ein, der Footer nimmt zwei Spalten ein
- Media Query für Bildschirme breiter als 900px: ändert das Layout auf drei Spalten und ändert die Platzierung der Bereiche: Header nimmt drei Spalten ein, Hauptinhalt und Sidebar nehmen je eine und zwei Spalten ein, der Footer nimmt drei Spalten ein
10.4 Änderung der Elementgrößen
Beispiel für eine vollständige Implementierung (Änderung der Größen der Elemente abhängig von der Bildschirmbreite):
/* Basisstil für alle Bildschirme */
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 100px;
gap: 10px;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
/* Für Bildschirme breiter als 600px */
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 150px;
}
}
/* Für Bildschirme breiter als 900px */
@media (min-width: 900px) {
.grid-container {
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anpassbare Größen mit CSS Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item item1">Element 1</div>
<div class="grid-item item2">Element 2</div>
<div class="grid-item item3">Element 3</div>
<div class="grid-item item4">Element 4</div>
<div class="grid-item item5">Element 5</div>
<div class="grid-item item6">Element 6</div>
</div>
</body>
</html>
Erklärung des Codes:
- Basisstil: erstellt einen Grid-Container mit zwei Spalten und automatischen Reihenhöhen von
100pxfür alle Bildschirme - Media Query für Bildschirme breiter als 600px: ändert das Layout auf drei Spalten und erhöht die Reihenhöhe auf
150px - Media Query für Bildschirme breiter als 900px: ändert das Layout auf vier Spalten und erhöht die Reihenhöhe auf
200px
GO TO FULL VERSION