{"id":246148,"date":"2016-10-05T06:10:42","date_gmt":"2016-10-05T13:10:42","guid":{"rendered":"http:\/\/css-tricks.com\/?p=246148"},"modified":"2016-10-05T12:37:42","modified_gmt":"2016-10-05T19:37:42","slug":"will-flattening-html-css-grids","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/will-flattening-html-css-grids\/","title":{"rendered":"Will we be flattening our HTML for CSS Grids?"},"content":{"rendered":"

I was watching Rachel Andrew<\/a> talk about CSS Grid Layout yesterday at An Event Apart<\/a>. Grid<\/a> 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<\/a> the latest version of the spec (it’s behind a flag at best). <\/p>\n

The good news is that, as of just a few days ago, the spec<\/a> is really stable and has entered “Candidate Recommendation” status. Since all<\/em> 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.<\/p>\n

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

<\/p>\n

Here’s some typical “page layout” HTML:<\/p>\n

<body>\r\n  <header class=\"site-header\"><\/header>\r\n  <main class=\"main-content\"><\/main>\r\n  <aside class=\"sidebar\"><\/aside>\r\n  <footer class=\"site-footer\"><\/footer>\r\n<\/body><\/code><\/pre>\n
All those major elements are a direct child of <body><\/code>, so <body><\/code> 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:<\/p>\n
\"\"<\/figure>\n
But…<\/h3>\n
… 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. <\/p>\n
<body>\r\n  <header class=\"site-header\">\r\n    <h1>I want to use the grid.<\/h1>\r\n    <nav>Me too!<\/nav>\r\n  <\/header>\r\n  <main class=\"main-content\">\r\n    <ul class=\"schedule\">\r\n       <li>Me three!<\/li>\r\n       <li>Me four!<\/li>\r\n    <\/ul>\r\n  <\/main>\r\n  ...\r\n<\/body><\/code><\/pre>\n
We can nest<\/em> 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.<\/p>\n
You can see some of this at work in Jen Simmons Jazz Poster example<\/a>. There are some elements you can see in the DOM there that it would be nice if they could all be positioned on the same grid, but are instead placed on different grids.<\/p>\n
\"\"<\/figure>\n
Subgridding might get a little tedious, since it’s kinda “subgrids all the way down”<\/em>. To make even my little example above work it would be like…<\/p>\n
body {\r\n  display: grid;\r\n}\r\n.site-header {\r\n  \/* current spec way... *\/\r\n  display: subgrid;\r\n\r\n  \/* old way... *\/\r\n  display: grid;\r\n  grid: subgrid;\r\n}\r\n.main-content {\r\n  display: subgrid;\r\n}\r\n.main-content > ul {\r\n  display: subgrid;\r\n}<\/code><\/pre>\n
And that’s without defining how the grid actually works. <\/p>\n
Eric Meyer has also emphasized this need for subgrids:<\/h3>\n
Without subgrids, you\u2019d 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\u2019d 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.<\/p><\/blockquote>\n
He used <form><\/code> markup as an example<\/a>, where <label><\/code>\/<input><\/code> pairs are necessarily grouped within container elements, meaning they can’t participate on the same grid together. <\/p>\n
\"\"
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.<\/figcaption><\/figure>\n
He called for grid to not even be shipped until this can be handled:<\/p>\n
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\u2019s worth it.<\/p><\/blockquote>\n
That ship has likely sailed …<\/h3>\n
… 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. <\/p>\n
And even bigger danger is that subgrid is considered “at-risk” and “may be dropped during the CR period”. <\/p>\n
And by “browser-maker folks”, as an interesting aside, it’s not always employees of browser companies<\/em> that do this work, but often outside committers. Here’s a blog post<\/a> about all this from one of those outside committers.<\/p>\n
The risk…<\/h3>\n
… 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. <\/p>\n
Or maybe nobody will do that. But hey it would be nice to have to tools so it’s not even an issue.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[466,686,586,731],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":291539,"url":"https:\/\/css-tricks.com\/hello-subgrid\/","url_meta":{"origin":246148,"position":0},"title":"Hello Subgrid!","date":"June 20, 2019","format":false,"excerpt":"Rachel Andrew\u2019s talk at CSSconf is wonderful because it digs into one of the most exciting changes that\u2019s coming soon to a browser near you: subgrid! That\u2019s a change to the CSS Grid spec that allows for much greater flexibility for our visual designs. Subgrid allows us to set one\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/rachel-andrew-subgrid-talk.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":308358,"url":"https:\/\/css-tricks.com\/first-steps-into-a-possible-css-masonry-layout\/","url_meta":{"origin":246148,"position":1},"title":"First Steps into a Possible CSS Masonry Layout","date":"May 18, 2020","format":false,"excerpt":"It's not at the level of demand as, say, container queries, but being able to make \"masonry\" layouts in CSS has been a big ask for CSS developers for a long time. Masonry being that kind of layout where unevenly-sized elements are layed out in ragged rows. Sorta like a\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/css-masonry.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":265204,"url":"https:\/\/css-tricks.com\/new-flexbox-guides-mdn\/","url_meta":{"origin":246148,"position":2},"title":"New flexbox guides on MDN","date":"January 12, 2018","format":false,"excerpt":"MDN released a comprehensive guide to Flexbox with new and updated materials by Rachel Andrew. The guide includes 11 posts demonstrating layouts, use cases and everything you could possibly want or need to know on the topic. All of the related Flexbox properties are nicely and conveniently attached to the\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":278660,"url":"https:\/\/css-tricks.com\/exclusions-will-hopefully-be-like-more-powerful-grid-friendly-floats\/","url_meta":{"origin":246148,"position":3},"title":"Exclusions will hopefully be like more powerful grid-friendly floats","date":"November 21, 2018","format":false,"excerpt":"Exclusions (which are currently in a \"working draft\" spec as I write) are kinda like float in that they allow inline content to wrap around an element. But not exactly a float. Chen Hui Jing has an excellent explanation: An exclusion element is a block-level element which is not a\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/grid-explusions-float.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":322969,"url":"https:\/\/css-tricks.com\/layoutit-grid-learning-css-grid-visually-with-a-generator\/","url_meta":{"origin":246148,"position":4},"title":"Layoutit Grid: Learning CSS Grid Visually With a Generator","date":"October 15, 2020","format":false,"excerpt":"Layoutit Grid is an interactive open source CSS Grid generator. It lets you draw your designs and see the code as you go. You can interact with the code, add or remove track lines and drag them around to change the sizing \u2014 and you get to see the CSS\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/layoutit-grid.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":339822,"url":"https:\/\/css-tricks.com\/can-i-email\/","url_meta":{"origin":246148,"position":5},"title":"Can I Email…","date":"May 6, 2021","format":false,"excerpt":"While I'm 85% certain you've seen and used Can I Use..., I bet there is only a 13% chance that you've seen and used Can I Email.... It's the same vibe\u2014detailed support information for web platform features\u2014except instead of support information for web browsers, it is email clients. Campaign Monitor\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-04-at-10.20.50-AM.png?fit=1200%2C847&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/246148"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=246148"}],"version-history":[{"count":11,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/246148\/revisions"}],"predecessor-version":[{"id":246200,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/246148\/revisions\/246200"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=246148"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=246148"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=246148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}