Expandable Sections Within a CSS Grid

CSS Grid is a fantastic tool for creating responsive layouts with minimal code, often eliminating the need for media queries. I'm comfortable using it for various layouts, prioritizing clean HTML. However, a recent UI challenge presented a unique problem: expanding a grid cell to full width when a button was clicked, while maintaining the original grid structure and responsiveness.

The requirement was that the expanded cell:

<li>Appear directly below the triggering cell. <li>Occupy the full grid width.

The solution, surprisingly elegant, uses just a few lines of CSS Grid. This article details three simple CSS Grid techniques to achieve this without JavaScript.

The Problem: Expandable Product Cards

Here's a simplified example of the UI task: Our Storybook component library features a product card grid. Each card needed a "quick view" button to reveal a larger, full-width card with detailed product information. This expansion had to:

<li>Dynamically insert the full-width card below the clicked card. <li>Preserve the original DOM order and visual grid arrangement. <li>Remain fully responsive on browser resize.

Initially, I assumed JavaScript would be necessary to reposition cards. Online searches for "quick view" implementations mostly yielded modal or overlay solutions. Modals are common for focused content, but I wanted a solution that integrated seamlessly within the grid.

The solution came from combining several powerful CSS Grid features.

CSS Grid Trick #1: Auto-Fitting Columns

My existing grid system already utilized this technique:

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, 20rem);
}

grid-template-columns: repeat(auto-fit, 20rem); creates columns (20rem wide here) that automatically adjust to the available space, wrapping to new rows as needed. Sara Soueidan's explanation of auto-fit vs. auto-fill is excellent. For simplicity, I used fixed column widths.

CSS Grid Trick #2: Full-Width Span

To accommodate the expanded card:

.fullwidth {
  grid-column: 1 / -1;
}

Since Trick #1 creates an explicit grid, grid-column: 1 / -1; spans the entire width (from column 1 to the last).

However, this leaves gaps above the full-width card.

CSS Grid Trick #3: Dense Packing

Filling these gaps uses a faux-masonry approach:

.grid {
  grid-auto-flow: dense;
}

grid-auto-flow: dense; optimizes auto-placement, filling gaps earlier in the grid. This works effectively when:

<li>All columns have the same width (or use minmax() for flexible widths). <li>All cells within a row have the same height (the default; align-items: stretch implicitly makes cells fill row height).

The original DOM order is preserved, crucial for accessibility. MDN provides a comprehensive explanation of CSS Grid auto-placement.

The Complete Solution

These three techniques create a simple, efficient layout with minimal CSS, no media queries, and no JavaScript for layout calculations.

JavaScript's Role

JavaScript remains necessary, but only for functionality: managing click events, focus, and displaying the injected card. In the prototype, the full-width cards are hard-coded; JavaScript toggles their visibility.

In a production environment, the card would likely be fetched dynamically and inserted. To avoid bloating the DOM, the injected content should be considered a progressive enhancement; if JavaScript fails, users are redirected to the product details page.

Accessibility Considerations

Prioritizing semantic HTML, ARIA attributes, and keyboard navigation:

<li>The grid uses <ul></ul> for semantic clarity. <li>Product cards are <li> elements with proper headings. <li>DOM order is preserved for natural tab order. <li>Focus management ensures proper keyboard navigation. (Further improvements could include explicit labels for the injected card, ESC key binding for closing, and viewport scrolling to ensure visibility).

Conclusion

This approach offers a clean alternative to modals, revealing additional content without obscuring the page. It could be useful for various scenarios, such as image captions or helper text, potentially replacing <details>/<summary></summary></details> in some cases. I'm eager to hear your thoughts and alternative approaches.

The above is the detailed content of Expandable Sections Within a CSS Grid. For more information, please follow other related articles on the PHP Chinese website!