Unlocking the Power of CSS Grid Layout

https://www.smashingmagazine.com/2018/01/understanding-sizing-css-layout/ And then Flexbox and grid layout came along, and they seemed to behave a bit strangely. Elements in our designs became bigger or smaller than we thought they should.

The result being that people started to create ﬂexbox based grids which used percentages, just like their ﬂoated forebears. With grid, the ﬁrst thing most people seem to do is try to create layouts based on percentage, going back to what they know to work. Keeping away from the slightly mysterious fr unit, that never seems to quite do what they expect.

So I have pretty much declared this year as the year of “how big is that box”, because I think that understanding sizing is the route to ﬁnding solutions for layout patterns that we previously had to rely on JavaScript for. I’m not a JavaScript hater, but it makes me sad when it is invoked for things that we have CSS solutions for, and which can be done in a more straightforward way, a more performanant way in CSS.

❖ Fixed sizing:   lengths such as px or em, or a resolvable percentage

❖ An intrinsic sizing function   auto, min-content, max-content, ﬁt-content

❖ A ﬂexible sizing function   The fr unit https://drafts.csswg.org/css-grid-1/#layout-algorithm

There are three types of sizing we need to consider. Fixed sizing, Intrinsic Sizing or ﬂexible.

Fixed sizing is something we are all familiar with, it’s how we’ve been doing layouts for years. Sizing things either as a length unit - be that pixels, ems or any other length. Percentages also fall into this type of sizing, as long as they can be resolved against something, for example a grid track sized as 20% resolves to a length which is 20% of the width of the grid container. Therefore when working out sizing resolvable percentages are treated in the same way as any other ﬁxed length - even though we probably see them as ﬂexible in our heads.

Next we have intrinsic sizing, you might be most familiar with auto, but we also have the speciﬁc intrinsic sizing keywords of min-content, max-content and ﬁt-content.

What is a fr unit anyway? A track sized with 1fr, is actually sized minmax(auto, 1fr). The minimum size is auto. .grid {   display: grid; grid-template-columns: 1fr 1fr 1fr; } I mentioned earlier that having a set of 1fr tracks doesn’t quite mean they will be equal sized.

If the track is sized with fr units then it is as if we have used the following sizing function minmax(auto, 1fr). So the minimum size is auto.

Grid needs to give the tracks an auto minimum and then share out the remaining space in proportion. This means that in this example, we have three 1fr tracks, however they are not equal with, if I add a very long word, or something with a width deﬁned to the ﬁrst track the auto minimum is much larger for that track and we no longer have three equal width columns.

minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) This then might cause overﬂows. Which is why the default is auto, as if there is space, we’re assuming you would rather the bigger thing got some space rather than overﬂowed.

However that can seem a little unintuitive if you were expecting 3 tracks of 1fr to be three equal sized tracks. It often turns out that way, but it isn’t quite what is happening.

So this seems like quite a lot of work if you think about it. The browser is having to work out what size it thinks the fr is, then look at the track and ﬁgure out what the minimum size of the content, then re-do the algorithm if that size has changed to make sure we are distributing space accordingly.

And that’s not all. Grid items don’t just span one track.

As many ﬂexible columns as will ﬁt Use auto-ﬁll or auto-ﬁt along with repeat and minmax, to create as many ﬂexible columns with a minimum size as will ﬁt into the container. .grid { display: grid; grid-gap: 10px; grid-template-columns:
repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: 100px;
} https://codepen.io/rachelandrew/pen/WdVjdg

Then we have everyone’s favourite trick. The ability to add as many columns as will ﬁt into the grid container by using repeat notation and the auto-ﬁll and auto-ﬁt keywords.

What is happening here might make more sense now we have looked at sizing. We are asking grid layout to auto ﬁll as many column tracks as will ﬁt in the container. We are handing out a minimum size of 200 pixels, so the columns won’t collapse smaller than that, and a maximum of 1fr. So 1fr of the available space.

Feature Queries Test for a CSS feature, and apply the CSS if it exists in that browser. header h1 { text-align: center; display: grid; grid-template-columns: 1fr auto 1fr; grid-gap: 20px; } @supports (display: grid) { header h1:before, header h1:after { content: ""; align-self: center; border-top: 1px solid rgba(37,46,63,.5); } } https://codepen.io/rachelandrew/pen/aqbdOy

I’ve not had an issue with the generated content appearing in a non-grid supporting browser, as we’re using a border top on some content that has no width, it’s the fr units that cause it to stretch in the inline direction once we are in a grid layout. However, if you were adding something that would display - for example using generated content to insert an icon, or an emoji or something, you could wrap the generated content bit in a feature query.

So I’m checking with the browser if it supports the display property with a value of grid. That way we only generate the borders if we have grid layout to position them.

We don’t need to worry about browsers that don’t support grid reading the grid CSS, they just ignore it. You could wrap the whole lot in a feature query if you wanted - but there is no need to.

CSS Shapes Floating the image and curving the text round once the screen is wide enough to do so. header img { border-radius: 50%; margin: 0 auto 2em auto; } @media (min-width: 30em) { header img { float: left;

shape-outside: margin-box;

margin: 0 20px 0 0;

} } https://codepen.io/rachelandrew/pen/aqbdOy As we get a bit wider, I’d like to do something neat with it. I’ll ﬂoat it left and cause the text to curve round it by using shape-outside margin-box.

Creating columns of cards Matching the minimum grid width, and the gap to the multi- column width and column-gap. .resources { max-width: 60em; } .resources { margin: 1em auto; padding: 0; list-style: none; display: grid; grid-template-columns:
repeat(auto-fill, minmax(15em,1fr)); grid-gap: 1em;

} .resources li.image { grid-row: auto / span 2; } https://codepen.io/rachelandrew/pen/aqbdOy I’m setting resources to max-width 60 em and then using the grid auto-ﬁll functionality to ﬁll that container with columns which are a minimum of 15em. This means we only get more than one column over 15em, enough room for 2 15em columns plus the gutter we get two, and we max out with three.

If we have two columns they line up with the multicol element due to grid-gap being 1em which is the default column gap for multicol.

We have the tools to provide great experiences for everyone. We are in a better position now to provide great experiences to everyone than we ever have been. Don’t let lack of support hold you back from realising amazing designs or great experiences for the people who have support for this stu ﬀ , but likewise don’t let all the shiny mean you forget about those who don’t yet have it.

It’s become a bit of a trite thing to say for conference stages that the web is for everyone, but I truly believe that. I’m not here to build shiny toys for rich people, and even with the way in which this medium has been used for some not great things of late, I still believe in the power of the web to change lives, allow content to be accessed and ideas shared.