An Auto-Filling CSS Grid With Max Columns of a Minimal Measurement

Inside Drupal 10 core, we’re implementing a brand new auto-filling CSS Grid method that I believe is cool sufficient to share with the world.

The necessities are:

The consumer specifies a most variety of columns. That is the auto-filling grid’s “pure” state.If a grid cell goes underneath a user-specified width, the auto-filling grid will readjust itself and reduce the variety of columns.The grid cells ought to all the time stretch to suit the auto-filling grid container’s width, regardless of the column rely.All of this could work impartial of viewport width and shouldn’t require JavaScript.

The auto-filling CSS Grid in motion

Right here’s how the ensuing auto-filling CSS grid behaves when it’s compressed by the draggable div ingredient to its left.

Right here’s the code

When you’re not on the lookout for the speculation behind the auto-filling grid, and simply wish to copy/paste code, right here you go!

.grid-container {
/**
* Consumer enter values.
*/
–grid-layout-gap: 10px;
–grid-column-count: 4;
–grid-item–min-width: 100px;

/**
* Calculated values.
*/
–gap-count: calc(var(–grid-column-count) – 1);
–total-gap-width: calc(var(–gap-count) * var(–grid-layout-gap));
–grid-item–max-width: calc((100% – var(–total-gap-width)) / var(–grid-column-count));

show: grid;
grid-template-columns: repeat(auto-fill, minmax(max(var(–grid-item–min-width), var(–grid-item–max-width)), 1fr));
grid-gap: var(–grid-layout-gap);
}

Concept and instruments behind the auto-filling CSS Grid

The code above makes use of a number of trendy CSS instruments together with CSS Grid’s repeat(), auto-fill(), and minmax() capabilities, in addition to the CSS max(), and calc() capabilities. Right here’s the way it works.

CSS Grid’s auto-fill() perform

The important thing to all of that is auto-fill(). We’d like every row to replenish with as many columns as attainable. For more information on auto-fill, try Sara Soueidan’s superior article on the distinction between auto-fill and auto-fit, which incorporates this useful video exhibiting the way it works.

However learn how to we be sure that it doesn’t fill in too many columns?

The CSS max() perform

That’s the place the max() perform is available in! We would like every grid cell’s width to max out at a sure proportion, say 25% for a four-column grid. However, we are able to’t have it go beneath the user-specified minimal width.

So, assuming a four-column grid and minimal cell width of 100px, the max() perform would look one thing like: max(25%, 100px).

Nevertheless, the 25% worth continues to be not fairly right as a result of it doesn’t take the grid gaps under consideration. What we actually want is one thing like this as a substitute:

max(calc(25% – <grid-gap-for-one-cell>), 100px)

We are able to calc()-ulate this in CSS! (Who says CSS isn’t programming?)

–gap-count: calc(var(–grid-column-count) – 1);
–total-gap-width: calc(var(–gap-count) * var(–grid-layout-gap));
–grid-item–max-width: calc((100% – var(–total-gap-width)) / var(–grid-column-count));

Now we have now one other key to creating this work! It will inform the grid cell to go to its most width — which takes under consideration the user-specified columns) — however won’t ever go underneath 100px.

max(100px, var(–grid-item–max-width))

Be taught extra in regards to the max() perform with Chris Coyier’s article on the CSS min(),max(), and clamp() capabilities.

CSS Grid’s minmax() perform

We’re getting shut, however there’s one key ingredient that’s lacking: The grid doesn’t all the time stretch to its mum or dad’s container’s width.

That is precisely what the minmax() perform is designed to do. The next CSS will set the minimal width to the <grid-item-width>, and if it has room, it’ll stretch all of the cells out equally to suit the mum or dad’s width!

minmax(<grid-item-width>, 1fr)

Let’s put all of it collectively and make some magic!

Utilizing the instruments above, we are able to put collectively this magic little bit of code that does precisely what we would like!

–gap-count: calc(var(–grid-column-count) – 1);
–total-gap-width: calc(var(–gap-count) * var(–grid-layout-gap));
–grid-item–max-width: calc((100% – var(–total-gap-width)) / var(–grid-column-count));

grid-template-columns: repeat(auto-fill, minmax(max(var(–grid-item–min-width), var(–grid-item–max-width)), 1fr));

CSS is enjoyable!

CSS has actually come a good distance. I had numerous enjoyable engaged on this, and I’m so completely satisfied that use-cases like this at the moment are attainable with out the usage of JavaScript.

Particular because of Andy Blum, who advised auto-fill() over auto-fit(). Additionally, a particularly particular because of the entire implementors and spec writers who make superior capabilities like this standardized and attainable.

An Auto-Filling CSS Grid With Max Columns of a Minimal Measurement initially printed on CSS-Tips. It is best to get the publication.