Causing Gridlock - A CSS Tale

Now that CSS Grid has excellent browser support, and the projects I'm working on are targeting newer browsers, I've been using it more and more for doing layouts. Along the way, I've noticed a couple interesting things about it and thought I'd share :)

Single Grid - Simple Layout

One of the first things I needed was a very simple (with CSS Grid anyways) "fixed" header/footer with content taking up the remaining available space and scrolling vertically if needed. Super simple, we just have to set up 3 rows and have the first and third rows auto and the second row 1fr (available space after first and third rows get whatever space they need) and overflow-y: auto. Here's a quick example:

See the Pen Simple Grid Layout w/ Scrolling Body by Bradley Gore (@bradleyd60) on CodePen.

Notice here that it is the <main> element that is told to take up 1fr and also has to have the overflow-y: auto. If we take the overflow style off that element and try to apply it to the inner <div class="bigly"> instead, nothing scrolls except for the entire body... Even though the <main> element is only supposed to be 1fr. Not really a big deal, just threw me a bit off at first, but it gets even more interesting if we add in another grid:

Grid-in-Grid - Slightly Less Simple Layout

The next thing we want to do is achieve the same as above, with one minor addition. Instead of the full inner content scrolling vertically between the nav and the footer, we want to have a left sidebar that scrolls vertically if needed and remainder of the inner area containing the actual content and being able to scroll between the nav and footer.

All we have to do is add in a nested grid, right? Well, it's at this point that it kind of magnifies the nuance shown above. Here's another example:

See the Pen Nested Grid Layout w/ 2 Columns Vertically Scrolling by Bradley Gore (@bradleyd60) on CodePen.

Notice here that in order to keep <main> from scrolling, and to keep its content from outgrowing the grid (i.e. locking it to our grid definitions), the overflow rules seem a bit non-intuitive:

<main>

• height is already supposed to be 1fr due to grid row definition on the parent element
• overflow is set to auto - even though we don't actually want this element to scroll!

.ads, .content

• overflow is set to auto because we do want these elements to scroll vertically - we just don't want the elements to grow beyond the 1fr.

If we remove the overflow from the .ads and .content elements, the <main> element will just scroll - but it will scroll the sidebar and content area together vs allowing them to scroll independently :(

If we remove the overflow from the <main> element, then it allows its content to grow beyond the 1fr vertical size it is supposed to be!

I've gone through several tutorials on using CSS Grid and haven't seen anything explaining why this is - so, I'm certainly open to me doing something wrong or just missing something =)

Any feedback or tips on the approaches shown in the examples - feel free to drop a comment below or reach out on twitter!