4 ms·
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"></heade
by clairity 4y ago
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.
- eyelidlessness 4y agoThere 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.