Hacker News Reader

Comment by clairity | Hacker News Reader

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.

View on HN

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.

Reply on news.ycombinator.com