tailwindcss-advanced-layouts

Use CSS Grid with grid-rows-[auto_1fr_auto] for the page structure and grid-cols-[250px_1fr_300px] for the middle section containing sidebar, main content, and aside. For responsive behavior, switch column definitions per breakpoint with md: and lg: prefixes.

Install the @tailwindcss/container-queries plugin, mark a parent element with the @container class, then use variants like @md:flex-row on children to respond to container width instead of viewport width. Named containers use syntax like @container/sidebar with @[300px]/sidebar: variants.

Auto-fill creates as many tracks as fit in the container, including empty ones, while auto-fit collapses empty tracks so existing items stretch to fill available space. Both are used with repeat() and minmax(), such as grid-cols-[repeat(auto-fit,minmax(250px,1fr))].

Tailwind v4 supports subgrid through custom utilities defined with the @utility directive, such as grid-template-columns: subgrid. This lets nested grid items 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 item and truncate to the text element so long text clips with an ellipsis instead of overflowing the container.

Use Grid for two-dimensional layouts where you control both rows and columns, such as page structures and card grids. Use Flexbox for one-dimensional layouts like navigation bars, button groups, and aligning items along a single axis.