> right, but that's the old, divitis way of doing it. using grid this way let's you set all the children to the content width and then selectively break out of that with just a class on the child element (without extra divs).
I think you may have misunderstood my comment. I’m saying you can use the grid technique described in the article and nest the technique to achieve similar results within sub-sections. Note that I used the classes defined in the article. My stated use case is exactly “usually just for the background”. My HTML only differs from the article’s example HTML by adding the content class to the full-width element, and a class which would hypothetically add the background to that element. I didn’t add any extra divs.
yah, that's the kind of thing subgrid is meant to solve. in my head, the structure looks more like:
<body class="content">
<header class="popout"></header>
<main></main> <!-- implicitly in the content track -->
<footer class="full"></footer>
</body>
you shouldn't have to add an extra div inside <main> to be able to use the parent grid. so you subgrid on <main> and get the benefits of just adopting the parent grid for popping things out, rather than nesting with extra divs/classes.
There is no extra div! The classes are necessary if you want to support the >90% of users whose browser supports grid but not su grid. My example, adapted to your preferred nomenclature, the “extra” classes renamed for their CSS functionality equivalent, and some content added:
<main class="grid">
<h1>I’m normal content width</h1>
<p>Ideally you wouldn’t need that grid class for this. But it keeps the CSS DRY for…</p>
<section class="full some-bg grid">
<h2>I’m normal content width too</h2>
<aside class="feature">
<p>I’m “feature” width!</p>
</aside>
</section>
<p>The “extra” class on the section above is <b>currently</b> necessary because…</p>
<section class="full some-bg">
<p>Whoops, no subgrid support? I’m full width on 95% of browsers currently in use!</p>
</section>
</main>
It’ll be cool when those classes can go away. You can certainly just make `full` always apply the main grid styles if you have no use case for full width sections without a grid. Or even have distinct `full` and `full-grid` classes, but you’re just swapping a character at that point.
I think you may have misunderstood my comment. I’m saying you can use the grid technique described in the article and nest the technique to achieve similar results within sub-sections. Note that I used the classes defined in the article. My stated use case is exactly “usually just for the background”. My HTML only differs from the article’s example HTML by adding the content class to the full-width element, and a class which would hypothetically add the background to that element. I didn’t add any extra divs.