Expandable Sections Inside a CSS Grid

No Comments

I really like CSS Grid. I really like how, with only a few traces of code, we will obtain absolutely responsive grid layouts, typically with none media queries in any respect. I’m fairly snug wrangling CSS Grid to supply fascinating layouts, whereas protecting the HTML markup clear and easy.

However just lately, I used to be introduced with a novel UI conundrum to resolve. Basically, any given grid cell might have a button that will open up one other, bigger space that can be a part of the grid. However this new bigger grid cell wanted to be:

proper under the cell that opened it, andfull width.

Seems there’s a good resolution to it, and within the spirit of CSS Grid itself, it solely includes a few traces of code. On this article, I’ll mix three one-line CSS Grid “tips” to resolve this. No JavaScript wanted in any respect.

An evidence of the particular downside I would like to resolve

Right here’s a minimalist UI instance of what I wanted to do:

That is our precise product card grid, as rendered in our Storybook part library:

Every product card wanted a brand new “fast view” button added such that, when clicked, it will:

dynamically “inject” a brand new full-width card (containing extra detailed product data) instantly under the product card that was clicked,with out disrupting the prevailing card grid (i.e. retain the DOM supply order and the visible order of the rendered playing cards within the browser), andstill be absolutely responsive.

Hmmm… was this even doable with our present CSS Grid implementation?

Absolutely I would want to resort to JavaScript to re-calculate the cardboard positions, and transfer them round, particularly on browser resize? Proper?

Google was not my buddy. I couldn’t discover something to assist me. Even a search of “fast view” implementations solely resulted in examples that used modals or overlays to render the injected card. In any case, a modal is often the one alternative in conditions like this, because it focuses the person on the brand new content material, while not having to disrupt the remainder of the web page.

I slept on the issue, and finally got here to a workable resolution by combining a few of CSS Grid’s strongest and helpful options.

CSS Grid Trick #1

I used to be already using the primary trick for our default grid system, and the product card grid is a particular occasion of that strategy. Right here’s some (simplified) code:

.grid {
show: grid;
hole: 1rem;
grid-template-columns: repeat(auto-fit, 20rem);

The “secret sauce” on this code is the grid-template-columns: repeat(auto-fit, 20rem); which supplies us a grid with columns (20rem huge on this instance) which are organized mechanically within the out there area, wrapping to the following row when there’s not sufficient room.

Interested in auto-fit vs auto-fill? Sara Soueidan has written an exquisite clarification of how this works. Sara additionally explains how one can incorporate minmax() to allow the column widths to “flex” however, for the needs of this text, I needed to outline mounted column widths for simplicity.

CSS Grid Trick #2

Subsequent, I needed to accommodate a brand new full-width card into the grid:

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

This code works as a result of grid-template-columns in trick #1 creates an “express” grid, so it’s doable to outline begin and finish columns for the .fullwidth card, the place 1 / -1 means “begin in column 1, and span each column as much as the final one.”

Nice. A full-width card injected into the grid. However… now we’ve got gaps above the full-width card.

CSS Grid Trick #3

Filling the gaps — I’ve executed this earlier than with a faux-masonry strategy:

.grid {
grid-auto-flow: dense;

That’s it! Required format achieved.

The grid-auto-flow property controls how the CSS Grid auto-placement algorithm works. On this case, the dense packing algorithm tries to fills in holes earlier within the grid.

All our grid columns are the identical width. Dense packing additionally works if the column widths are versatile, for instance, through the use of minmax(20rem, 1f).All our grid “cells” are the identical peak in every row. That is the default CSS Grid conduct. The grid container implicitly has align-items: stretch inflicting cells to occupy 100% of the out there row peak.

The results of all that is that the holes in our grid are stuffed — and the gorgeous half is that the authentic supply order is preserved within the rendered output. That is vital from an accessibility perspective.

See MDN for a whole clarification of how CSS Grid auto-placement works.

The whole resolution

CodePen Embed Fallback

These three mixed tips present a easy format resolution that requires little or no CSS. No media queries, and no JavaScript wanted.

However… we do nonetheless want JavaScript?

Sure, we do. However not for any format calculations. It’s purely purposeful for managing the clicking occasions, focus state, injected card show, and many others.

For demo functions within the prototype, the full-width playing cards have been hard-coded within the HTML of their appropriate areas within the DOM, and the JavaScript merely toggles their show properties.

In a manufacturing surroundings, nevertheless, the injected card would in all probability be fetched with JavaScript and positioned within the appropriate location. Grid layouts for one thing like merchandise on an eCommerce web site are inclined to have very heavy DOMs, and we need to keep away from unnecessarily bloating the web page weight additional with numerous extra “hidden” content material.

Fast views needs to be thought of as a progressive enhancement, so if JavaScript fails to load, the person is solely taken to the suitable product particulars web page.

Accessibility concerns

I’m keen about utilizing appropriate semantic HTML markup, including aria- properties when completely needed, and guaranteeing the UI works with only a keyboard in addition to in a display screen reader.

So, right here’s a rundown of the concerns that went into making this sample as accessible as doable:

The product card grid makes use of a <ul><li> assemble as a result of we’re displaying a listing of merchandise. Assistive applied sciences (e.g. display screen readers) will due to this fact perceive that there’s a relationship between the playing cards, and customers shall be knowledgeable what number of objects are within the checklist.The product playing cards themselves are <article> parts, with correct headings, and many others.The HTML supply order is preserved for the playing cards when the .fullwidth card is injected, offering a great pure tab order into the injected content material, and out once more to the following card.The entire card grid is wrapped in an aria-live area in order that DOM adjustments are introduced to display screen readers.Focus administration ensures that the injected card receives keyboard focus, and on closing the cardboard, keyboard focus is returned to the button that initially triggered the cardboard’s visibility.

Though it isn’t demonstrated within the prototype, these extra enhancements might be added to any manufacturing implementation:

Make sure the injected card, when targeted, has an applicable label. This might be so simple as having a heading as the primary component contained in the content material.Bind the ESC key to shut the injected card.Scroll the browser window in order that the injected card is absolutely seen contained in the viewport.

Wrapping up

So, what do you assume?

This might be a pleasant different to modals for once we need to reveal extra content material, however with out hijacking your complete viewport within the course of. This is perhaps fascinating in different conditions as effectively — assume picture captions in a picture grid, helper textual content, and many others. It’d even be an alternative choice to some circumstances the place we’d usually attain for <particulars>/<abstract> (as we all know these are solely greatest utilized in sure contexts).

Anyway, I’m involved in the way you may use this, and even the way you may strategy it otherwise. Let me know within the feedback!

The put up Expandable Sections Inside a CSS Grid appeared first on CSS-Tips. You possibly can assist CSS-Tips by being an MVP Supporter.

    About Marketing Solution Australia

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment