Tailwind Grid Classes to CSS
Convert Tailwind CSS Grid utilities like grid, grid-cols-3, gap-4 to plain CSS. Understand the CSS Grid properties that power Tailwind's grid system.
Detailed Explanation
Tailwind Grid Utilities in CSS
Tailwind's grid utilities provide a clean abstraction over CSS Grid. Each class maps to one or more CSS Grid properties, making complex layouts achievable with minimal markup.
Setting Up a Grid
The grid class is the foundation: it sets display: grid. From there, you define columns and rows.
/* grid */
display: grid;
/* grid-cols-3 */
grid-template-columns: repeat(3, minmax(0, 1fr));
/* grid-rows-2 */
grid-template-rows: repeat(2, minmax(0, 1fr));
Gap (Gutter)
Tailwind's gap-* classes control the spacing between grid cells:
gap-4→gap: 1remgap-x-4→column-gap: 1remgap-y-2→row-gap: 0.5rem
The spacing scale follows Tailwind's default: each unit is 0.25rem, so gap-4 equals 1rem (16px).
Spanning Columns and Rows
/* col-span-2 */
grid-column: span 2 / span 2;
/* col-span-full */
grid-column: 1 / -1;
/* row-span-3 */
grid-row: span 3 / span 3;
Common Grid Patterns
A 12-column layout with a full-width header and sidebar:
grid grid-cols-12 gap-4
col-span-full → header
col-span-3 → sidebar
col-span-9 → main content
This translates to standard CSS Grid with grid-template-columns: repeat(12, minmax(0, 1fr)) and child elements using grid-column: span N / span N.
Use Case
Frontend developers building a dashboard layout who need to understand how Tailwind's grid-cols and gap classes translate to CSS Grid for cross-browser testing, or when writing a CSS fallback for a Tailwind-based grid.