Layout-Raster-Rechner (Spalten, Spaltenabstand, 8pt-Raster)

Geben Sie Gesamtbreite, Spaltenzahl, Spaltenabstand und Seitenränder ein und erhalten Sie die Breite einer Spalte und jeder Spaltenfolge. Geeignet für ein 12-Spalten-Webraster oder zum Aufteilen einer Druckseite in Millimetern.

So geht’s

1. Wählen Sie unter „Einheit“ px oder mm, dann eine „Breiten-Vorgabe“, oder geben Sie die „Gesamtbreite“ ein.
2. Geben Sie „Spalten“, „Spaltenabstand“ und „Rand“ ein. Bei ungleichen Rändern stellen Sie „Seitenränder“ auf „Links und rechts getrennt“.
3. Lesen Sie „Spaltenbreite“ und die Tabelle „Spannbreiten“ und prüfen Sie am Badge, ob der Wert im unter „Rastereinheit“ gewählten Raster liegt. Falls nicht, probieren Sie die Gesamtbreite aus dem Hinweis.
4. Schalten Sie „Drei Breakpoints vergleichen“ ein, um drei Breiten auf einmal zu sehen, und drücken Sie „CSS kopieren“, um den Code zu übernehmen.

So wird gerechnet

• Spaltenbreite = (Gesamtbreite − linker Rand − rechter Rand − Spaltenabstand × (Spalten − 1)) ÷ Spalten. Breite von n Spalten = Spaltenbreite × n + Spaltenabstand × (n − 1).
• Mit einer „Maximalen Inhaltsbreite“ bleibt der Inhalt bei größerer Gesamtbreite auf dieser Breite, der Rest wird auf die Ränder verteilt.
• Im mm-Modus ist die Rastereinheit in Punkt: 1 pt = 0,3528 mm, und 1 mm = 3,78 px bei 96 dpi.
• Ihre Eingaben bleiben im Browser dieses Geräts gespeichert.

Häufige Fragen

Wie breit ist eine Spalte in einem 1200-px-Raster mit 12 Spalten?

Mit 24 px Spaltenabstand und ohne Ränder: (1200 − 24 × 11) ÷ 12 = 78 px. Mit 32 px Spaltenabstand sind es 70,67 px.

Was tun, wenn die Spaltenbreite nicht im 8-px-Raster liegt?

Der Hinweis nennt das nächste Vielfache und die Gesamtbreite dafür: Eine 78-px-Spalte wird bei 1224 px Inhaltsbreite zu 80 px. Auch eine kleine Änderung von Spaltenabstand oder Rändern hilft.

Wie viele Spalten sollte eine A4-Seite haben?

Es gibt keine einzige Antwort. Zwei oder drei passen zu Text; sechs oder zwölf erleichtern das Mischen von Fotos und Tabellen. Geben Sie A4 210 mm, 15 mm Ränder und 4 mm Spaltenabstand ein, um zu vergleichen.

Wie verwende ich das kopierte CSS?

.container legt Inhaltsbreite und seitliches Padding fest; .grid legt Spalten und Abstand fest. Ein Element über mehrere Spalten erhält grid-column: span 4. Im mm-Modus enthält der Ausschnitt auch @page-Ränder für den Druck.