Modern CSS Layout in Practice: Grid, Subgrid and Container Queries

By 2026, "layout" rarely requires hand-written hacks anymore. CSS Grid and Flexbox have been Baseline for years, and subgrid plus container queries now have mainstream browser support. For teams building websites, this means one thing: page structure should be expressed with the native capabilities of CSS, not patched together with extra DOM, negative margins or JavaScript.

This capability set is a core foundation of the frontend building category on 16IDC. To combine these layout skills with real page templates, see the HTML page template; for other layout features that reached stable in 2026, read about CSS gap decorations.

Grid and Flexbox: Division of Labor, Not Substitutes

They are not competitors but different dimensions: Grid excels at two axes (rows and columns together), while Flexbox handles one axis (alignment and distribution on the main axis). A mature practice is to use Grid for the outer regions and Flexbox for single-row alignment inside, such as navigation, button groups, and meta rows inside cards. On breakpoints you usually only adjust the Grid column count; Flexbox internals need no changes.

Subgrid: Aligning Nested Grids with the Parent

According to MDN, when a grid item is itself declared as display: grid, it creates a completely independent set of tracks by default, making it hard to align nested content with the outer grid. The subgrid value instead makes the nested grid reuse the tracks already defined on the parent (sizes and gaps are inherited), so elements at different nesting levels align precisely.

.grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 20px;
}

.item {
  grid-column: 2 / 7;
  display: grid;
  grid-template-columns: subgrid; /* reuse the parent's 5 column tracks */
}

.subitem {
  grid-column: 3 / 6;
}

Subgrid (grid-template-columns: subgrid and grid-template-rows: subgrid) is Baseline Widely available (full support since Chrome 117, Firefox 71 and Safari 16). It is best suited for:

  • Table-like cards: multi-column content inside a card row aligned with the overall page grid;
  • Form label columns: consistent label width across multiple fields;
  • Intra-list alignment: icons, timestamps and status columns in comments or order entries.

One caveat: no implicit tracks are created in a subgridded dimension, so items that overflow fall into the last track. When the item count is unknown, keep one dimension as a regular nested grid.

Container Queries and Container Query Units

Container queries let a component respond to its own container width instead of the viewport. Declare container-type: inline-size on the parent, then use @container conditions on the children:

.card-list {
  container-type: inline-size;
}

@container (min-width: 480px) {
  .card { display: grid; grid-template-columns: 1fr 1fr; }
}

Alongside container queries come container query units: cqi is 1% of the container's inline size (usually width), cqb is 1% of the block size, and cqmin/cqmax pick the smaller/larger of the two (see the CSS-Tricks explanation). They describe sizes relative to the parent container better than vw/vh, for example scaling card typography and padding with the container:

.card { font-size: 2cqi; padding: 3cqw; }

Container queries and media queries are complementary: media queries for page-level layout, container queries for component-level details. This way a component adapts anywhere it is placed and is naturally reusable.

Logical Properties: Layout That Adapts to Writing Mode

Logical properties replace physical directions with inline/block semantics: margin-inline-start instead of margin-left, inset-inline instead of left/right. In horizontal Chinese or English pages the results are identical, but for sites that need right-to-left languages such as Arabic or Hebrew, physical properties break while logical properties flip automatically. For multilingual sites this is a low-cost, high-return investment.

Putting It Together: An Admin Card Dashboard

Each technique is easy in isolation; combining them is the hard part. Take a common admin dashboard: the page uses Grid to split a sidebar and main region, the main region holds several cards, and inside each card the title, timestamp, and status columns must line up with the row. That single example chains all three capabilities:

.dashboard { display: grid; grid-template-columns: 240px 1fr; gap: 16px; }
.cards { container-type: inline-size; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

@container (max-width: 640px) {
  .cards { grid-template-columns: 1fr 1fr; }   /* fewer columns when the container narrows */
}

.card { display: grid; grid-template-columns: subgrid; }
.meta { display: flex; justify-content: space-between; }   /* Flexbox for a single meta row */

The outer Grid owns the overall skeleton, the container query makes "cards drop columns when the main region narrows" happen automatically, subgrid keeps the three columns inside each card aligned with the page grid, and the final line uses Flexbox for a single-row meta bar. Each capability handles one slice, with no negative margins or JavaScript. This also answers a common question: when the page and the component have two independent adaptation axes, let media queries handle the page, container queries handle the component, Grid handle the skeleton, and Flexbox handle single rows.

Reference: MDN container queries https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries
Reference: Can I Use — Subgrid https://caniuse.com/css-subgrid

Combining the Layout Toolkit

  1. Mobile first: write the single-column baseline first, then scale up with min-width media queries;
  2. Progressive enhancement: wrap newer features such as container queries in @supports, falling back to Flexbox or a single column on older browsers;
  3. Reuse components: encapsulate cards and list items as standalone components and let container queries handle adaptation internally;
  4. Check compatibility: verify target browsers with BrowserStack or Can I Use before shipping.

16IDC Takeaway

Every time layout capability drops a "patch", the cost of building a site drops with it. For teams using website building or plain HTML/CSS, following these Baseline-level features beats pulling in a heavier framework. For a complete step-by-step review, check the responsive layout checklist.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid