Layout Recipe

Build a 3-Column Grid with Tailwind CSS

'grid grid-cols-3 gap-6' creates three equal-width columns ('repeat(3, minmax(0, 1fr))' under the hood) with consistent gutters in both directions. Children flow into cells automatically, left to right, wrapping to a new row every three items — no manual row management needed. The 'minmax(0, 1fr)' Tailwind generates is important: it lets long content shrink instead of blowing out the column width.

The playground below is pre-configured with this exact layout — tweak any control to explore, then copy the Tailwind or vanilla CSS from the exporter.