tailwindcss-advanced-layouts

Use CSS Grid with grid-rows-[auto_1fr_auto] for header, content, and footer, then nest grid-cols-[250px_1fr_300px] for the sidebar, main, and aside columns. Add responsive variants like md:grid-cols to collapse sidebars on smaller screens.

Install the @tailwindcss/container-queries plugin, mark a parent element with the @container class, then use variants like @md:flex-row on children. Named containers like @container/sidebar let multiple containers coexist with independent breakpoints.

Auto-fill creates as many tracks as fit even if empty, leaving gaps, while auto-fit collapses empty tracks so existing items stretch to fill the row. Both work in Tailwind via grid-cols-[repeat(auto-fit,minmax(250px,1fr))].

Tailwind has no built-in subgrid utilities, but in v4 you can define them with @utility, such as grid-template-columns: subgrid. Child elements with col-span can then align their own children to the parent grid tracks.

Flex items have a default min-width of auto, so long content prevents shrinking. Add min-w-0 to the flexible item and use truncate or overflow-hidden on the content to allow proper shrinking and text truncation.

Use flex-col flex-wrap with a fixed container height and percentage-based item widths so items flow vertically into columns. Alternatively, use CSS multi-column with columns-3 and break-inside-avoid to keep cards intact across columns.