CSS Layout Generator

Yes. The generator exports both standard CSS and equivalent Tailwind utility classes for all layout properties.

CSS Grid is a two-dimensional layout system (rows and columns), while Flexbox is one-dimensional (row or column). Grid is better for page layout; Flexbox is better for component layout.

Use grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)). This creates as many columns as fit in the container at the minimum width, and expands them to fill available space. The generator includes this pattern in the responsive presets.

The gap property (formerly grid-gap) sets the space between rows and columns simultaneously. You can set row and column gaps independently using row-gap and column-gap. Gap does not add space around the outer edges of the grid — use padding on the container for that.

The fr (fractional) unit represents a fraction of the available space in the grid container. grid-template-columns: 1fr 2fr 1fr creates three columns where the middle column is twice as wide as the others. It is similar to flex-grow in Flexbox but applies to both dimensions in Grid.

Yes. For Grid, the generator outputs Tailwind classes like grid-cols-3 and gap-4. For custom fr values that fall outside Tailwind defaults, it generates CSS custom property fallbacks. Tailwind v4 also supports arbitrary values in brackets, e.g., grid-cols-[2fr_1fr].