Home > Designing, Others > Will we be flattening our HTML for CSS Grids?

Will we be flattening our HTML for CSS Grids?

October 5th, 2016 Leave a comment Go to comments

I was watching Rachel Andrew talk about CSS Grid Layout yesterday at An Event Apart. Grid is amazing and the day will soon come where it’s a dominant web layout tool of choice. That day isn’t here yet though, as no stable browser is shipping the latest version of the spec (it’s behind a flag at best).

The good news is that, as of just a few days ago, the spec is really stable and has entered “Candidate Recommendation” status. Since all browsers have been developing against the spec, it’s likely that widespread non-prefixed ready-to-go support will drop in all stable browsers fairly soon.

The bad news is that it will probably do-so without subgrid support, a point that Rachel underscored well in her talk.

Here’s some typical “page layout” HTML:

<body>
  <header class="site-header"></header>
  <main class="main-content"></main>
  <aside class="sidebar"></aside>
  <footer class="site-footer"></footer>
</body>

All those major elements are a direct child of , so can be the grid and the four major elements are laid out on that grid. That’s kind like one of Rachel’s examples at GridByExample:

But…

… let’s say we wanted to build a grid from elements that weren’t necessarily at a completely flat HTML structure like we just saw. 

<body>
  <header class="site-header">
    <h1>I want to use the grid.</h1>
    <nav>Me too!</nav>
  </header>
  <main class="main-content">
    <ul class="schedule">
       <li>Me three!</li>
       <li>Me four!</li>
    </ul>
  </main>
  ...
</body>

We can nest grids, just like we can nest flexbox within a grid cell or flexbox within flexbox, but in the example above we cannot make those child elements participate on the same grid together.

You can see some of this at work in Jen Simmons Jazz Poster example, where headers are being hidden because they can’t be in the correct place both semantically and positionally at the same time.

Subgridding might get a little tedious, since it’s kinda “subgrids all the way down”. To make even my little example above work it would be like…

body {
  display: grid;
}
.site-header {
  display: grid;
  grid: subgrid;
}
.main-content {
  display: grid;
  grid: subgrid;
}
.main-content > ul {
  display: grid;
  grid: subgrid;
}

And that’s without defining how the grid actually works.

Eric Meyer has also emphasized this need for subgrids:

Without subgrids, you’d either have to make every element you want to lay out a child of the body element (or whatever you used to create the page grid), or you’d have to recreate segments of the page grid in each nested grid, and give up any hope of columns that can flex with the contents of multiple page sections. Neither solution is appealing.

He used

markup as an example, where / pairs are necessarily grouped within container elements, meaning they can’t participate on the same grid together.


Each of these rows has to be it’s own grid context, meaning it’s not nearly as useful as if they could share the same grid.

He called for grid to not even be shipped until this can be handled:

subgrids are a major component of grid layout, and should be a part of any grid layout implementation when it emerges from developer-preview status. If that means delaying the emergence of grids, I think it’s worth it.

That ship has likely sailed …

… on having full subgrid support the day CSS Grid “ships”. But it’s probably worth making some noise (like writing this blog post) to indicate this is fairly important and should be worked on and released as quickly as possible after the first round of CSS Grid goes out. That’s not my thinking, that’s what Jen Simmons said she’ll be pushing for at Mozilla.

And even bigger danger is that subgrid is considered “at-risk” and “may be dropped during the CR period”.

And by “browser-maker folks”, as an interesting aside, it’s not always employees of browser companies that do this work, but often outside committers. Here’s a blog post about all this from one of those outside committers.

The risk…

… is that we love grid layout so much, that we’ll malform our HTML to make it work. We’ll make our HTML less accessible to make our grid idea work. We’ll ignore semantics and flatten our HTML.

Or maybe nobody will do that. But hey it would be nice to have to tools so it’s not even an issue.

Will we be flattening our HTML for CSS Grids? is a post from CSS-Tricks

Categories: Designing, Others Tags:
  1. No comments yet.
  1. No trackbacks yet.
You must be logged in to post a comment.