Geben Sie die Containerbreite, die gewünschte Spaltenanzahl, den Abstand zwischen den Spalten und den Außenrand ein. Das Tool berechnet die Breite jeder Spalte und erzeugt den passenden CSS-Grid-Code.
Geben Sie eine positive Containerbreite, mindestens eine Spalte sowie einen Abstand und Rand von null oder mehr ein.
In die Zwischenablage kopiert.
Warum ein Rastersystem im Webdesign wichtig ist
Ein Rastersystem teilt eine Seite in eine feste Anzahl von Spalten mit gleichmäßigen Abständen auf und richtet jedes Element an dieser Struktur aus. Das gibt einem Layout einen visuellen Rhythmus, den ein Betrachter wahrnimmt, auch ohne ihn benennen zu können: Überschriften, Bilder und Textblöcke fluchten miteinander, statt an beliebigen Positionen zu schweben. Bei einer responsiven Seite liefert ein Raster außerdem einen einzigen Regelsatz, der sich mit der Bildschirmbreite anpasst, statt jedes Element für jede Bildschirmgröße von Hand neu zu positionieren.
CSS Grid, Flexbox, Bootstrap: wann was, und die Rolle von Tailwind CSS
CSS Grid arbeitet zweidimensional, Zeilen und Spalten gleichzeitig, und eignet sich deshalb gut für die gesamte Seitenstruktur oder ein Karten-Layout mit gleichmäßiger Ausrichtung in beiden Richtungen. Flexbox arbeitet auf einer Achse (Zeile oder Spalte) und passt zu kleineren Bausteinen wie einer Navigationsleiste oder einer Button-Gruppe, bei denen sich Elemente entlang einer Linie verteilen oder ausrichten sollen. Das Bootstrap-Raster ist ein 12-Spalten-System auf Basis von Flexbox mit fertigen Klassen (col-6, col-4 und so weiter): Es wird in vielen deutschsprachigen Webentwicklungskursen weiterhin unterrichtet, weil damit ein funktionierendes Layout ohne eigenes CSS entsteht. Tailwind CSS gewinnt bei derselben Zielgruppe an Boden mit einem anderen Ansatz, Utility-Klassen direkt im Markup statt benannter Grid-Komponenten, was Entwicklern entgegenkommt, die feine Kontrolle wollen, ohne ihr HTML zu verlassen. Bei einem neuen Projekt ohne bestehendes Framework liefert reines CSS Grid meist ein saubereres Ergebnis mit weniger Markup als beide anderen Ansätze.
Grenzen des erzeugten Codes
Der von diesem Tool erzeugte Code ist ein Ausgangspunkt für einen einzigen, festen Haltepunkt. Er erzeugt keine Media Queries, sodass Spaltenzahl und Abstand bei jeder Bildschirmbreite gleich bleiben, solange keine eigenen Haltepunkte hinzugefügt werden. In der Praxis sinkt die Spaltenzahl auf dem Smartphone meist auf weniger Spalten (oft 4) und auf dem Tablet auf eine mittlere Anzahl (oft 8), während die volle Anzahl nur auf dem Desktop bleibt. Reduzieren Sie die Spaltenzahl und passen Sie den Abstand innerhalb einer Media Query für jeden Haltepunkt an, den Ihr Design braucht.
Gute Praxis bei Abstand und Rand
Übliche Abstandswerte im Webdesign sind 8px, 16px und 24px, meist passend zu einer Abstandsskala, die auch anderswo auf der Seite verwendet wird (Buttons, Innenabstände, Außenabstände), damit das Layout einheitlich statt beliebig wirkt. Das 12-Spalten-Raster selbst stammt aus dem Printdesign, wo sich eine in 12 Teile geteilte Seite sauber in Hälften, Drittel, Viertel oder Sechstel aufteilen ließ, eine Eigenschaft, die das Webdesign übernommen hat, weil sie dieselbe Flexibilität für Spaltenbreiten bietet. Diese Systematik wird auch in der Schweizer Raster-Tradition der Grafikgestaltung (International Typographic Style) beschrieben, die ähnliche Prinzipien schon vor dem Web für gedruckte Seiten festgelegt hat. Ein Rand, der mindestens so groß wie der Abstand ist, verhindert, dass der äußere Rand des Layouts eng am Bildschirmrand wirkt. Für Proportionen auf Basis eines Seiten- oder Bildverhältnisses statt einer Spaltenzahl siehe den Seitenverhältnis-Rechner, und für Abstände auf Basis des Goldenen Schnitts den Goldener-Schnitt-Rechner.