Grid-Spalten-Rechner
Spaltenbreiten für beliebigen Container, Spaltenanzahl und Abstand — mit kopierfertigem CSS-Grid-Code und mehrspaltigen Span-Größen.
815 Aufrufe
Die Spalten-Mathematik
Spalte = (Container − (Spalten−1) × Abstand) ÷ Spalten. Ein 1200-px-Container mit 12 Spalten und 24-px-Abständen ergibt 78-px-Spalten; ein Element über 4 Spalten ist 4×78 + 3×24 = 384 px. Das Tool listet jede Span-Breite auf, damit Sie exakte Maße in Designdateien übernehmen können.
In CSS schreiben Sie das selten fest vor: display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px lässt den Browser die Division erledigen. Die Pixelwerte sind wichtig für Figma-Frames, Bildexporte und um zu verstehen, worauf sich 1fr bei Ihren Breakpoints tatsächlich auflöst.
Häufig gestellte Fragen
Sollen Ränder in der Container-Breite enthalten sein?
Nein — geben Sie die Inhaltsbreite ein (Container minus seitliche Ränder/Padding). Ein 1440-px-Design mit je 120 px Rand pro Seite hat einen 1200-px-Arbeitscontainer.
12 Spalten oder etwas anderes?
12 lässt sich durch 2, 3, 4 und 6 teilen, weshalb es zum Standard wurde. Dichte Dashboards verwenden manchmal 24; einfache Marketingseiten kommen gut mit 6 oder sogar 4 aus.
Ähnliche Tools
Problem melden
Grid-Spalten-Rechner