Modern web design tools have significantly improved vertical alignment capabilities. Early website layouts, often 960px wide, relied heavily on horizontal alignment using 12-column grids. The advent of media queries, while solving many problems, introduced new challenges, especially concerning alignment when elements reflow or reposition.

Consider a common scenario: a "bar" containing button groups, each within a <fieldset></fieldset> with a <legend></legend>. On larger screens, alignment is straightforward. A simple CSS approach, using floats, handles this and provides responsive behavior at smaller breakpoints:

.accessibility-tools fieldset {
  width: 48%;
  float: left;
  margin-right: 1%;
}

/* Mobile */
@media only screen and (max-width: 480px) {
  .accessibility-tools fieldset {
    width: 100%;
  }
}

However, on smaller screens, vertical misalignment becomes apparent. While fixed-width, pixel-based CSS solutions using media queries can force alignment, this approach lacks flexibility and relies on "magic numbers" tied to specific content:

/* Mobile */
@media only screen and (max-width: 480px) {
  legend {
    width: 160px;
  }
  button {
    width: 130px;
  }
}

This inflexibility, coupled with the reliance on media queries (which I'm aiming to minimize), necessitates a more adaptable solution. The ideal solution should allow buttons and labels to respond to:

1. Available space
2. Content dimensions
3. Surrounding elements

Media queries fall short because they don't consider the surrounding space, as illustrated in Heydon Pickering's "The Flexbox holy albatross." The desired behavior is for the second <fieldset></fieldset> to wrap only when both fieldsets no longer fit on a single line.

Flexbox and Grid: Initial Attempts

Flexbox, with its flex-wrap: wrap property, offers improved flexibility, allowing elements to flow onto multiple lines. However, a min-width is still often needed for perfect vertical alignment.

CSS Grid, designed for layout management, provides auto-fit and auto-fill keywords (within repeat()) for multi-line layouts without media queries. Using auto-fit, we achieve:

.wrapper--accessibility-tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, 450px);
  grid-gap: 10px;
}

However, absolute width values might still be needed for optimal alignment. Flexible grid tracks using fr units or minmax() offer further improvements, but limitations arise because only direct children of the grid container are considered grid items.

The Subgrid Solution

CSS Grid Level 2 introduces subgrid, enabling nested grids to inherit track sizing from their parent. This solves the problem of independent nested grids. Subgrid allows elements in child grids to respond to content in sibling grids.

For our button example, the parent grid is defined using auto-fill and minmax():

.wrapper--accessibility-tools {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: 10px;
}

Child grids use subgrid to inherit the parent's column tracks:

.sub-grid {
  display: grid;
  grid-column: span 3;
  grid-template-columns: subgrid;
  align-items: center;
}

This ensures consistent alignment and responsive behavior. Buttons and labels adapt to available space, wrapping onto new lines only when necessary.

Browser Compatibility and Further Reading

Subgrid browser support is currently limited (primarily Firefox). CSS feature queries can provide fallbacks for other browsers. For detailed browser compatibility information, refer to caniuse.com. Further reading on this topic includes articles by Miriam Suzanne, Rachel Andrew, and Heydon Pickering (links provided in the original article). A wrapper around the fieldsets might be necessary to handle a bug involving form elements, grid, and flexbox. The fieldset's display property can be set to contents to address this.

The above is the detailed content of Achieving Vertical Alignment (Thanks, Subgrid!). For more information, please follow other related articles on the PHP Chinese website!