tailwindcss-advanced-layouts

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

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

Auto-fill creates as many tracks as fit even if empty, while auto-fit collapses empty tracks so existing items stretch to fill space. In Tailwind, write them as grid-cols-[repeat(auto-fit,minmax(250px,1fr))] arbitrary values.

Tailwind has no built-in subgrid utility, but you can define one in v4 with @utility subgrid-cols { grid-template-columns: subgrid; }. Children then align to the parent grid tracks when spanning multiple columns.

Flex items have a default min-width of auto, preventing them from shrinking below content size. Add min-w-0 to the flex child and truncate to the text element so long strings clip correctly.