You know how to style individual elements. Now, let's build the skeleton. Modern web applications require layouts that are robust, flexible, and responsive without a mountain of media queries. The key is to think in terms of systems, not just individual pages.

Think of CSS Grid as the architect, defining the main structure of your app: the header, sidebar, main content area, and footer. It handles the two-dimensional arrangement. Flexbox is the interior designer, organizing the items within those regions—like aligning buttons in a toolbar or items in a navigation menu. This combination gives you both macro and micro control over your layout.

Rigid, pixel-based layouts are a thing of the past. Modern layouts use fluid grids that adapt to the available space. The secret is the fractional unit, or fr. Instead of defining columns with fixed pixels or percentages, the fr unit tells a column to take up a fraction of the available space. This makes creating proportional columns effortless.

But we can get even smarter. By combining fr units with functions like minmax(), auto-fit, and auto-fill, we can create layouts that automatically adjust the number of columns based on the container's width. This is the foundation of intrinsically responsive design.

This single CSS rule creates a fully responsive grid of cards. On a wide screen, you might get four columns. As the screen narrows, the grid will automatically reflow to three columns, then two, then one, all without a single media query. The auto-fit keyword creates as many columns as will fit, and minmax() ensures each column is at least 250px but can stretch to fill any extra space.

Beyond basic grids, you need patterns for common UI components like navigation and dashboards. Two of the most essential are the Sidebar Toggle and Priority+ Navigation.

A Sidebar Toggle is a pattern where a navigation pane can be hidden or shown, typically on larger screens for SaaS apps or dashboards. On mobile, it's often hidden by default and revealed by a hamburger icon. This preserves screen real estate for the main content.

The Priority+ Navigation pattern is a clever solution for complex menus. It keeps essential navigation items visible and tucks less important ones into a "More" dropdown menu when space is limited. This avoids the ugly wrapping or horizontal scrolling of traditional navigation bars on smaller screens. Implementing this often requires a bit of JavaScript to measure item widths, but the layout itself is pure CSS.

A long-standing challenge with CSS Grid was aligning items inside a nested grid with the main parent grid. For example, you might have a card whose header and footer need to align with the headers and footers of adjacent cards.

The subgrid value for grid-template-columns or grid-template-rows solves this. When an element is set to display: grid and also has grid-template-columns: subgrid;, it doesn't create its own new grid tracks. Instead, it adopts the tracks of its parent grid, allowing its children to align perfectly with items outside the nested grid.

Using subgrid ensures a consistent and clean visual rhythm across your entire layout, even with complex, nested components. It's a powerful tool for achieving pixel-perfect alignment in modular designs.

Let's review some key terms.

Time to test your knowledge.

By combining these advanced Grid techniques and layout patterns, you can move beyond styling simple documents and start engineering professional, adaptable application interfaces that work beautifully on any device.