Container Question Options with CSS Grid and Flexbox

True container queries are a a lot requested for CSS characteristic that might be a complement to media queries however be positioned on container parts as a substitute of the viewport.

Experimental CSS container queries are right here! This is Miriam Suzanne’s container queries proposal explainer which has an experimental prototype in Chrome Canary. After you obtain Canary, go to chrome://flags to seek for and allow container queries. For more information, assessment my primer on container queries.

Utilizing grid and flexbox, we are able to create types that reply to container and content material widths and overcome among the ache factors that container queries are proposed to resolve.

We’ll cowl:

• ⏸ Use of CSS grid format and flexbox to realize container dependent changes from equal-width columns to row format
• 🏆 The “holy grail” resolution to variable-width breakpoint columns
• 🚀 Implementing CSS customized variables to make the options as scalable as doable

Skip to the options >

When Ethan Marcotte launched the idea of Responsive Design, we grew to become educated to regulate parts on the web page throughout viewport sizes through the use of media queries.

I’m an enormous fan of Ethan’s and recall studying that article inside weeks of publish. It was simply one of the crucial transformative articles for the online.

P.S. – Responsive Design lately turned 10! Learn Ethan’s reflection >

Ten years in the past, media queries made sense as a result of we have at all times been sure to the instruments accessible on the time.

However there remained one space the place CSS did not fairly have a solution: how do you reply to adjustments inside a person container on the web page as a substitute of the entire viewport?

This gave rise to the 12-column grid and associated frameworks comparable to Bootstrap as an middleman resolution of making use of width changes on the fly with out writing an each rising wall of one-off media queries.

And people addressed a number of widespread frustrations, and virtually bought us there.

As a veteran of selling web site improvement, the most important draw back of counting on grid frameworks was nonetheless being sure to the device. We’d not often deliberately design exterior of a 12-col grid due to the price of overhead in creating extra types and wrangling customized media queries.

An excessive amount of blah blah blah for ya? Let’s examine an instance from Bootstrap docs:

<div class="container">
<div class="row">
<div class="col-sm">Certainly one of three columns</div>
<div class="col-sm">Certainly one of three columns</div>
<div class="col-sm">Certainly one of three columns</div>
</div>
</div>

The important thing right here is the col-sm courses that are required to change from “equal width columns” above a set “small” viewport width (540px for Bootstrap) to full-width on even smaller viewports.

However – what if these columns had been inside one other column?

That is the place we hit our challenge: The col-sm columns will not go full-width till the viewport is shrunk. Which implies, the nested columns might be extraordinarily slender. To resolve this, you could have so as to add a bunch of additional utility courses to change, change, and presumably even change once more.

Would not or not it’s good if these columns had been one way or the other conscious of their content material, and break primarily based on a minimal content material width moderately than depend on viewport width?

Welcome to the necessity for container queries 🙌

Word: The comparable options offered for grid vs. flexbox, sadly, are restricted to equal column widths, however this nonetheless helps cut back the necessity for media queries and fill within the hole for conduct to be primarily based on container vs. viewport width. Skip to the “holy grail” resolution for variable width columns.

We are going to take a look at deal with container queries with grid and flexbox in addition to focus on the professionals and cons of every.

Preview

To additional present context for what we’re seeking to obtain, here is the ultimate end result:

Utilizing solely three courses and three CSS vars() – considered one of every for grid and every of the flexbox options – we’ve made the “playing cards” responsively change from 1-3 throughout, and the cardboard content material change from column to row format with no media queries in sight 😎

New to CSS grid format? We’ll revisit a way that I’ve additionally described in Options to Exchange the 12-Column Grid and that’s explored in two of my egghead movies associated to responsive grids.

We’ll start by creating the .grid class, setting the show, and including a modest hole worth:

.grid {
show: grid;
hole: 1rem;
}

After that, we simply want one line to provoke our container question magic:

grid-template-columns: repeat(auto-fit, minmax(20ch, 1fr));

The repeat perform will apply the outlined column conduct to all columns that exist. Instantly, this makes it scalable to develop to any variety of columns that might be created from any sort of content material.

Then, as a substitute of an absolute quantity, we use the auto-fit worth which is answerable for making certain the columns keep equal-width by stretching columns to fill any accessible house.

After that, we use minmax() to set the minimal allowed column width, after which use 1fr because the max which ensures the content material fills the column as a lot as room permits.

minmax() and particularly the 20ch is the place we basically have outlined what in media question land could be our “breakpoint”.

The ch unit is the same as the 0 (zero) character of the present font, which makes this further delicate to the present content material.

You could possibly actually swap to rem to stop the computed worth from altering as fonts change. Nevertheless, within the demo this worth technically does use the font-size utilized to physique which might be equal to 1rem if you have not modified it. That is as a result of it is positioned on the ul and never typography parts, so the ul defaults to inheriting font properties from the physique.

The one unit it is best to not use could be % as that might stop the columns from ever collapsing.

Cool, that takes care of the “playing cards”:

Grid Container Content material

Now to deal with for the cardboard content material which we might additionally like to permit to be displayed in columns if room permits. However, the “breakpoint” ought to be smaller.

At first, you might attain for a utility class. In truth, I did too.

However fashionable CSS offers us a extra versatile means: customized variables.

First, we’ve to set our preliminary variable worth, which is assigned to :root. The worth we’re setting is the min a part of minmax:

:root {
--grid-min: 20ch;
}

After which replace our rule accordingly:

grid-template-columns: repeat(auto-fit, minmax(var(--grid-min), 1fr));

We will then add our .grid class to the li which is our “card” container, after which use inline model to change the --grid-min worth:

<li class="card grid" model="--grid-min: 15ch">
<p>Jujubes soufflé cake tootsie roll sesame snaps cheesecake bonbon.</p>
<p>
Halvah bear claw cheesecake. Icing lemon drops chupa chups pudding tiramisu.
</p>
</li>

Leading to our remaining grid resolution. Discover how the cardboard content material independently adjusts from column to row format as the cardboard container narrows or widens.

Why Cannot Grid Do Variable Width Columns?

What’s the barrier stopping this resolution dealing with variable width columns whereas sustaining the “container question” advantages of breaking to row format with out media queries?

The closest we are able to get to variable width columns with grid within the simplest way doable is to take away our earlier work, and as a substitute use:

grid-auto-flow: column;

Which flips the default axis and by default the created columns are certainly variable width.

Nevertheless, this may’t ever break down as a result of there isn’t a wrap property in grid. This implies you’ll doubtless encounter overflow, which may be acceptable for predictably brief content material. It may also be positioned inside a media question to solely set off that conduct above a sure viewport width – which once more, is reverse to the aim of “container queries”.

I used to be very hopeful that our resolution might be prolonged to this use case with:

model="--grid-min: min-content;"

Which might compute to updating our property definition to:

grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));

In principle, this looks like a near-perfect resolve. Usually min-content means the content material could be allowed to shrink to the minimal width required to carry the content material (in a textual content block, this basically means shrinking so far as the longest phrase).

Sadly, the repeat spec particularly prohibits this conduct:

Automated repetitions (auto-fill or auto-fit) can’t be mixed with intrinsic or versatile sizes.

The place min-content is taken into account to be one of many “intrinsic sizes”. Bummer.

Learn on to learn the way flexbox can present this conduct!

The primary flexbox resolution I’ll describe is an instance of a way created by Heydon Pickering referred to as the “Flexbox Albatross“.

Let’s start our rule:

.flexbox {
show: flex;
flex-wrap: wrap;
}

The notable factor right here is making certain flex-wrap: wrap is ready, else the “breakpoint” impact would by no means truly happen.

Now, a giant distinction between flexbox and grid format is that the sizing conduct of the flex kids is not set on the mum or dad.

To make our rule essentially the most versatile, we are going to use the kid combinator – > – along with the common sector – * – to start a rule that will probably be utilized to speedy flex kids of any ingredient sort.

Utilizing Sass, we are able to neatly nest this below the earlier properties:

.flexbox {
> * {
}
}

This is the place the “Flexbox Albatross” magic occurs. Let’s add the foundations after which focus on.

> * {
flex-grow: 1;
flex-basis: calc((35rem - 100%) * 999);
}

flex-grow: 1 ensures that the column will fill as a lot house because the algorithm and different property values will enable.

The flex-basis rule performs some math magic with the CSS property calc that basically results in the ingredient being at minimal 35rem and under that minimal increasing to 100%.

The result’s equal-width columns up till the minimal acceptable width.

Sadly, calc doesn’t enable the ch worth which takes away a little bit of the power to visualise when the column will break. On this demo, 35rem was discovered to be almost equal to 20ch within the given font and measurement.

As of writing, the flexbox hole property is gaining assist nevertheless it’s not fairly reliably accessible but.

We are going to alter our guidelines to make use of margin as a polyfill for now.

Do you know: margins don’t collapse on flexbox or grid kids, so any provided worth will compound between kids.

.flex {
margin: 1rem -0.5rem;
> * {
margin: 0.5rem;
}
}

These guidelines add .5rem round every youngster, the outer parts of which is negated with a detrimental margin on the .flex mum or dad.

Adjusting Breakpoint

In contrast to grid, this base resolution signifies that all columns will “break” on the identical time:

That’s, till we add our good friend CSS variables ✨

Let’s add the variable and replace flex-basis:

--flex-min: 35rem;

flex-basis: calc((var(--flex-min) - 100%) * 999);

Now, we’ll replace it on the center “card”:

<li class="card" model="--flex-min: 50rem;"></li>

Annndddd – on resize, wait a minute – all three playing cards break on the identical time, simply sooner than earlier than 🤔

What is going on on?

flex-basis: 1 + the variety of objects is accountable.

As soon as the center card drops, the opposite two playing cards increase full-width due to flex-basis: 1.

If we transfer our --flex-min adjustment to the first or _last card, then the remaining two playing cards hold their smaller “breakpoint”.

Flexbox Container Content material

Okay, now let’s handle the identical thought of paragraph content material that switches from column to row format.

With our --flex-min variable already in place, we’ve what we’d like.

Nevertheless, with the “gotcha” we simply skilled, we might want to add a nested wrapper across the flex kids’s content material:

<div class="flex" model="--flex-min: 18rem;">
<p>Jujubes soufflé cake tootsie roll sesame snaps cheesecake bonbon.</p>
<p>
Halvah bear claw cheesecake. Icing lemon drops chupa chups pudding tiramisu.
</p>
</div>

This basically resets the context so it could possibly’t have an effect on the mum or dad containers. A minor annoyance in comparison with grid, however achieves almost an identical performance:

If you’ll not want a number of distinctive breakpoints for the flexbox objects, we are able to as a substitute use what Una named the “Deconstructed Pancake” to uniformly apply breakpoints with solely flex-basis.

Advantages of this method over the Flexbox Albatross:

• the flex-basis breakpoint relies on the particular person merchandise as a substitute of the width allotted to the mum or dad
• objects will begin new rows impartial of one another vs. abruptly without having to outline distinctive breakpoints
• we are able to use ch as a result of there is no calc concerned

One potential draw back is the necessity for nested parts to resolve conflicts between setting of the width customized variable (--pancake-min), as proven on the demo when attempting to set a brand new breakpoint for the cardboard paragraph content material.

This is the important CSS:

:root {
--pancake-min: 20ch;
}
.flex-pancake {
show: flex;
flex-wrap: wrap;
margin: 1rem -0.5rem;
> * {
flex: 1 1 var(--pancake-min);
margin: 0.5rem;
}
}

This appears to be like just like how we setup the Flexbox Albatross resolution up till we get to the flex rule for the kids.

The shorthand together with the computed variable breaks out to:

flex-grow: 1;
flex-shrink: 1;
flex-basis: 20ch;

We’re permitting objects to each develop and shrink till the world is just too slender for all objects to suit primarily based on the flex-basis, at which level the objects will start to drop to new rows. This makes the conduct just like the grid resolution besides the dropped merchandise will increase to fill the accessible space.

This resolution has turn into my desire normally.

Flexbox will enable us to create a way to designate that some columns ought to shrink to their “auto” width, whereas different columns have impartial “min-width” conduct. This leads to variable width columns that in the end retain “breakpoint” conduct primarily based on container width.

Two keys that allow flexbox as the answer:

• “column” width is ready to be independently set on flex kids
• “wrapping” is inherently triggered when content material exceeds the accessible horizontal width which relies on the container

We are going to create a utility class to assign the “auto width” conduct:

> * {
&.flex--auto {
flex: 0 1 auto;
}
}

This shorthand computes to:

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

Ensuing within the conduct of solely rising to what grid would contemplate max-content and being allowed to shrink indefinitely.

Coupled with different flex kids that use the flexbox conduct, the .flex--auto objects will seem to interrupt into row conduct as soon as their siblings truly break from hitting their allowed minimal width.

For instance this, we are able to setup the next inside considered one of our current “playing cards”. Discover the replace on the --flex-min worth. That may be adjusted to style relying on content material offered, and it’ll solely apply to flex kids with out .flex--auto. We might transfer it to be utilized on the span throughout the li to regulate extra solely if wanted.

<ul class="list-unstyled" model="--flex-min: 8rem;">
<li class="flex">
<robust class="flex--auto">Ice Cream</robust> <span>Butter Pecan</span>
</li>
<li class="flex">
<robust class="flex--auto">Musical Artist</robust>
<span>Justin Timberlake</span>
</li>
<li class="flex">
<robust class="flex--auto">Painter</robust> <span>Vincent Van Gogh</span>
</li>
</ul>

Word this additionally works with the Deconstructed Pancake methodology.

And here is the end result:

It’s possible you’ll really feel this instance is a bit jarring, nevertheless it illustrates how every listing merchandise has impartial wrapping conduct as soon as the non-auto merchandise hits the 8rem minimal width because of the container width shrinking.

Extra virtually, that is additionally utilized on the icon + title lockup within the demo. The demo additionally reveals the identical listing utilizing the albatross conduct to offer a option to evaluate the strategies.

I encourage you to open this up in CodePen to have the ability to manipulate the viewport measurement.

The highest row (inexperienced define) makes use of the grid resolution, the center row (crimson define) makes use of the Flexbox Albatross resolution, and the underside row (purple define) makes use of the Deconstructed Pancake resolution. The second card listing for every flexbox resolution demonstrates the “holy grail” resolution per-list merchandise.

By Stephanie Eckles (@5t3ph)

Select grid if:

• Equal-width columns with extra “reader pleasant” minimal width settings are a precedence (ch vs. rem)
• It is extra fascinating for columns to interrupt a bit extra independently once they arrive on the minimal acceptable width
• “Orphan” columns for odd numbers of columns are acceptable (seen on the demo at a mid-size viewport)

Select flex if:

• You want variable width columns that also have “breakpoint” conduct primarily based on container measurement
• Lack of full hole assist is just not a problem

Select the Flexbox Albatross if:

• It is acceptable for columns to hit the breakpoint concurrently
• Fallout of adjustment of that breakpoint is appropriate (chance of additional columns breaking to rows as described)
• You need the flex-basis breakpoint to be the mum or dad’s width

Select the Deconstructed Pancake if:

• You need the flex-basis breakpoint primarily based on the merchandise width
• You need objects to interrupt to new rows on a person foundation
• You need to use CSS items like ch that are not allowed in calc