CSS Grid zu Tailwind – grid-cols-3 und eigene Tracks

grid-template-columns: repeat(3, 1fr) → grid-cols-3. Eigene Tracks nutzen Arbitrary Values.

Gleichmäßige Raster übertragen sich problemlos: grid-template-columns: repeat(3, 1fr) entspricht grid-cols-3. Sobald Tracks unterschiedliche Einheiten oder feste Breiten mischen, entstehen arbitrary values, die im Markup schnell unleserlich werden. Layouts mit benannten Bereichen bleiben deshalb häufig im Stylesheet, wo ihre Absicht klarer erkennbar ist.

Explizite Templates

grid-template-columns mit festen fr mappt oft auf grid-cols-*. Seltene Brüche oder komplexes minmax brauchen Brackets oder CSS.

Benannte Areas

grid-template-areas ist selten 1:1 zu Utilities. Areas in CSS lassen oder Markup vereinfachen.

Gap und auto-flow

gap-* und grid-flow-* decken viel Alltag ab, ohne Zeilen/Spalten manuell anzufassen.

Ausprobieren

Konverter öffnen

.example { display: flex; gap: 1rem; padding: 1rem; }

Vertrauenshinweis: Ausgabe visuell prüfen. Der Konverter ist ein Entwurfshilfe.