Don’t use empty or low content for your design system grid examples

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.

The post Don’t use empty or low content for your design system grid examples appeared first on CSS-Tricks.

Source: CSS-tricks.com