Advanced CSS layouts: container queries, grid, and subgrid in practice

CSS layout has evolved dramatically. Modern CSS provides layout tools that were unimaginable a few years ago. Container queries, CSS Grid, and subgrid let you create responsive, flexible layouts without JavaScript.

CSS Grid is the most powerful layout system in CSS. It gives you two-dimensional layout control rows and columns simultaneously. Use grid-template-areas for semantic layout naming. Use auto-fit and auto-fill for responsive grids without media queries.

Container queries let components respond to their container's size rather than the viewport size. This is a paradigm shift for component-based architectures. A card component can adjust its layout based on how much space it has, regardless of the viewport.

Subgrid passes the grid track sizing from a parent grid to a child grid. This solves a long-standing problem: aligning items across nested grid containers. A common use case is a card grid where each card has a header, body, and footer.

CSS Grid replaces Flexbox for many use cases. Flexbox is still best for one-dimensional layouts. Grid is better for two-dimensional layouts where you need alignment in both axes. A common pattern is grid for the page layout and flexbox within each grid cell.

Modern CSS removes the need for CSS preprocessors for most layout work. CSS custom properties, nesting, and container queries handle what used to require Sass or Less. Evaluate whether your build pipeline still needs a preprocessor.

Accessibility considerations apply to layouts too. Grid order doesn't change DOM order screen readers follow the DOM, not the visual layout. Always ensure that the source order makes sense for screen readers.

-

Rizwan Saleem | https://rizwansaleem.co