Was bedeutet responsiv?
Eine responsive Website passt ihr Layout automatisch an die Breite des Bildschirms an. Auf dem Desktop sieht man vielleicht acht Spalten nebeneinander – auf dem Tablet vier – und auf dem Smartphone zwei. Das Werkzeug dafür sind Media Queries.
Du kannst deine Media Queries direkt im Browser testen, ohne ein echtes Gerät zu brauchen – die DevTools haben einen eingebauten Modus dafür. Wie das geht, erklärt der Artikel DevTools – Teil 1: Bildschirmgrößen testen.
Was ist ein Media Query?
Ein Media Query ist eine CSS-Bedingung, die nur gilt, wenn eine bestimmte Bildschirmbreite erreicht wird. Die Syntax sieht so aus:
@media (max-width: 900px) {
/* Diese Regeln gelten nur bis 900px Breite */
.grid-container {
grid-template-columns: repeat(4, 1fr);
}
}
Mit max-width: 900px sagst du: „Sobald der Bildschirm 900 Pixel breit oder schmaler ist, gelten diese CSS-Regeln." Du kannst mehrere solcher Blöcke untereinander schreiben – einen für Tablet, einen für Smartphone.
Die Punkte, an denen das Layout wechselt, nennt man Breakpoints. Typische Breakpoints sind:
- 900px – Tablet im Hochformat
- 400px – Smartphone
Grid responsiv
Du änderst einfach den Wert von grid-template-columns im Media Query. Auf dem Desktop acht Spalten, auf dem Tablet vier, auf dem Smartphone zwei – eine Zeile CSS pro Breakpoint, fertig.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid responsiv</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 16px;
padding: 20px;
}
.grid-box {
padding: 20px;
border-radius: 8px;
min-width: 0;
overflow-wrap: break-word;
}
.grid-box:nth-child(1) { background-color: papayawhip; }
.grid-box:nth-child(2) { background-color: lemonchiffon; }
.grid-box:nth-child(3) { background-color: lightsalmon; }
.grid-box:nth-child(4) { background-color: goldenrod; }
.grid-box:nth-child(5) { background-color: aquamarine; }
.grid-box:nth-child(6) { background-color: deepskyblue; }
.grid-box:nth-child(7) { background-color: lightblue; }
.grid-box:nth-child(8) { background-color: darkslateblue; color: white; }
/* Tablet: 4 Spalten */
@media (max-width: 900px) {
.grid-container {
grid-template-columns: repeat(4, 1fr);
}
}
/* Smartphone: 2 Spalten */
@media (max-width: 400px) {
.grid-container {
grid-template-columns: repeat(2, 1fr);
}
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-box"><strong>Zelle 1</strong><p>Lorem ipsum dolor sit amet.</p></div>
<div class="grid-box"><strong>Zelle 2</strong><p>Lorem ipsum dolor sit amet.</p></div>
<div class="grid-box"><strong>Zelle 3</strong><p>Lorem ipsum dolor sit amet.</p></div>
<div class="grid-box"><strong>Zelle 4</strong><p>Lorem ipsum dolor sit amet.</p></div>
<div class="grid-box"><strong>Zelle 5</strong><p>Lorem ipsum dolor sit amet.</p></div>
<div class="grid-box"><strong>Zelle 6</strong><p>Lorem ipsum dolor sit amet.</p></div>
<div class="grid-box"><strong>Zelle 7</strong><p>Lorem ipsum dolor sit amet.</p></div>
<div class="grid-box"><strong>Zelle 8</strong><p>Lorem ipsum dolor sit amet.</p></div>
</div>
</body>
</html>
Warum das viewport-Meta-Tag so wichtig ist
Ohne <meta name="viewport" content="width=device-width, initial-scale=1.0"> ignoriert das Smartphone deine Media Queries praktisch vollständig. Mobile Browser nehmen ohne diese Angabe an, die Seite sei für einen Desktop gebaut, und zoomen sie einfach heraus – als wäre der Bildschirm 980px breit. Das viewport-Tag sagt dem Browser: „Nimm die echte Gerätebreite als Basis und fang ohne Zoom an." Erst dann greifen deine Breakpoints so wie du sie geschrieben hast.
Was passiert hier?
Auf dem Desktop definiert grid-template-columns: repeat(8, 1fr) acht gleich breite Spalten. Der erste Media Query bei 900px schreibt das auf repeat(4, 1fr) um – vier Spalten, die acht Zellen verteilen sich automatisch auf zwei Zeilen. Unter 400px wechselt es auf repeat(2, 1fr) – zwei Spalten, vier Zeilen. Pro Breakpoint ist es genau eine Zeile CSS.
min-width: 0 und overflow-wrap: break-word
Grid-Zellen haben von Natur aus eine Mindestbreite, die sich am Inhalt orientiert – ohne Gegenmassnahme können sie breiter werden als ihre Spalte erlaubt und die Seite scrollt horizontal. min-width: 0 hebt diese Mindestbreite auf und erlaubt der Zelle, wirklich so schmal zu werden wie die Spalte es vorgibt. overflow-wrap: break-word sorgt dann dafür, dass langer Text innerhalb der Zelle umbricht statt hinauszuragen.
Warum Grid für feste Spaltenanzahlen?
Bei Flexbox hängt das Umbrechen davon ab, wie viel Platz die einzelnen Elemente beanspruchen – das lässt sich schwer exakt steuern. Grid dagegen legt die Spaltenanzahl direkt fest. Du sagst „acht Spalten" und bekommst acht Spalten, egal wie breit oder schmal die Inhalte sind.