Dave and I had Jen Simmons on ShopTalk the other day. Jen was talking about Intrinsic Web Design and how one of the core tenets of it is grids with rows and columns that don’t necessarily change at the same rate or ones that have essentially different rules for how they behave.
For example, take this (contrived) grid setup:
.grid {
display: grid;
grid-template-columns: 1fr minmax(50px, 100px) 20% auto;
}
Each of those columns will behave differently.
I’m just wrapping my head about this, and definitely don’t fully understand it. Here’s what it seems like to me, numbered 1-4 based on the “strength” (I guess?) of the width.
.grid {
display: grid;
grid-template-columns:
1fr /* #4 - Weakest, will fill remaining space */
minmax(50px, 100px) /* #3 - Will only start changing when other columns force it */
20% /* #1 - Definite size, steady */
auto /* #2 - Indefinite size, entirely based on content, pushy */
;
}
This is much different from quite a long history of how we’ve set up grid columns in the past. Float-based grids typically use percentages (a definite size) to set columns. Same with inline-block-based grids, typically.
Even with grid, if you set up all your columns with all percentages or all fractional units, you’d likely have a steady grid in which the content inside won’t mess with sizing. But Jen is saying that it’s interesting to have a grids where the content has a say in how they size. Embrace it. Sounds fun to me.
But anyway, say you’re setting up a grid that uses mixed values for column widths like this. Don’t do that with totally empty columns, otherwise, you’ll get a false sense of how those columns will behave.
Just look at this demo where these four grids have the exact same setup and all that is different is the amount of text in each column.
See the Pen Different Collapse Rates of Different Column Width Values by Chris Coyier (@chriscoyier) on CodePen.
Cool’n’weird.
That’s a very similar problem to the one you have on your 3 column example on your (very useful) flexbox page (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) :) If you add more content into the aside on that 3 column example the whole thing breaks.
It is very important when creating demos to use ‘extravagant’ content as that will quickly show up errors in the concept :)
Wow, this is so useful, as many tutorials don’t go into what to expect when setting grid cells differently. One question: why does the cell set to “minmax(50px, 100px)” never go below 100px?
In the first grid, why doesn’t the
auto
column (whose text is already wrapped) push the second column down to50px
? As the viewport shrinks, the second column eventually goes down to50px
. Why only then? What determines when this starts happening? Shouldn’t it go down to50px
before the text in the fourth column starts wrapping?There is definitely some algorithm behind it. I thought it was something like that columns that are both shrinking at the same time are designed to reach their minimums at the same time… but doesn’t quite appear to be the case here.
I think it is related to intrinsic/extrinsic sizing that Rachel Andrew recently wrote about in Smashing Mag: https://www.smashingmagazine.com/2018/09/flexbox-sizing-flexible-box/#the-css-intrinsic-and-extrinsic-sizing-specification
I think I’ve figured it out. Browsers shrink the
minmax()
column based on the width of theauto
column. The algorithm for this is as follows:Determine the smallest width of the
auto
column (89px
in the demo).Calculate the difference between
min
andmax
in theminmax()
column (100px
–50px
=50px
).Add those two values together:
89px
+50px
=139px
.When the
auto
column shrinks to139px
, theminmax()
column will start shrinking. Both columns will shrink at the same pace for50px
until they reach their minimum values.That is really interesting. I created a fork of the Codepen to show the column properties. (I found it easier to compare/contrast this way)
I’d like to see these kind of examples to always include at least one extra-long word. I think it should be a basic tenet of web design.
In this case it can be easily fixed with a overflow-wrap, but the uninitiated will always fall for the classic blunder of the non-breaking word (especially with the cursed table rendering).
Cheers
That’s a great idea. Blowing out grids based on content being too big is just as much of a problem as too little content causing weirdness.
You can always use this: Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch. And yes that really is a real word (Longest city name in the world)
From the spec:
https://www.w3.org/TR/css-grid-1/#min-size-auto
“Note that while a content-based minimum size is often appropriate, and helps prevent content from overlapping or spilling outside its container, in some cases it is not:
In particular, if grid layout is being used for a major content area of a document, it is better to set an explicit font-relative minimum width such as min-width: 12em. A content-based minimum width could result in a large table or large image stretching the size of the entire content area, potentially into an overflow zone, and thereby making lines of text needlessly long and hard to read.
Note also, when content-based sizing is used on an item with large amounts of content, the layout engine must traverse all of this content before finding its minimum size, whereas if the author sets an explicit minimum, this is not necessary. (For items with small amounts of content, however, this traversal is trivial and therefore not a performance concern.)”