{"id":326473,"date":"2020-11-30T16:45:09","date_gmt":"2020-12-01T00:45:09","guid":{"rendered":"https:\/\/css-tricks.com\/?p=326473"},"modified":"2020-11-30T19:11:04","modified_gmt":"2020-12-01T03:11:04","slug":"native-css-masonry-layout-in-css-grid","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/native-css-masonry-layout-in-css-grid\/","title":{"rendered":"Native CSS Masonry Layout In CSS Grid"},"content":{"rendered":"\n

Rachel Andrew introducing<\/a> the fact that masonry layout is going to be a thing in native CSS via CSS grid layout. The thing with masonry is that we can already do it<\/a> for the most part, but there is just one thing that makes it hard: doing the vertical-staggering and<\/em> having a left-to-right source order. So that’s what this new ability will solve in addition to it just being less hacky in general. <\/p>\n\n\n\n

You can already test a partial implementation in Firefox Nightly by enabling layout.css.grid-template-masonry-value.enabled<\/code>.<\/p>\n\n\n\n\n\n\n\n

.container {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  grid-template-rows: masonry;\n}<\/code><\/pre>\n\n\n\n
I like the grid-template-rows: masonry;<\/code> syntax because I think it clearly communicates: “You aren’t setting these rows. In fact, there aren’t even really rows at all anymore, we’ll take care of that.”<\/em> Which I guess means there are no rows to inherit in subgrid, which also makes sense. <\/p>\n","protected":false},"excerpt":{"rendered":"
Rachel Andrew introducing the fact that masonry layout is going to be a thing in native CSS via CSS grid layout. The thing with masonry is that we can already do it for the most part, but there is just one thing that makes it hard: doing the vertical-staggering and having a left-to-right source order. […]<\/p>\n","protected":false},"author":3,"featured_media":326474,"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":true,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/pure-css-masonry.jpg?fit=1726%2C1187&ssl=1","jetpack-related-posts":[{"id":308358,"url":"https:\/\/css-tricks.com\/first-steps-into-a-possible-css-masonry-layout\/","url_meta":{"origin":326473,"position":0},"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":317422,"url":"https:\/\/css-tricks.com\/a-lightweight-masonry-solution\/","url_meta":{"origin":326473,"position":1},"title":"A Lightweight Masonry Solution","date":"August 3, 2020","format":false,"excerpt":"Back in May, I learned about Firefox adding masonry to CSS grid. Masonry layouts are something I've been wanting to do on my own from scratch for a very long time, but have never known where to start. So, naturally, I checked the demo and then I had a lightbulb\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/bricks-with-gaps.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":308403,"url":"https:\/\/css-tricks.com\/exciting-things-on-the-horizon-for-css-layout\/","url_meta":{"origin":326473,"position":2},"title":"Exciting Things on the Horizon For CSS Layout","date":"May 7, 2020","format":false,"excerpt":"Michelle Barker notes that it's been a heck of a week for us CSS layout nerds. Firefox has long had the best DevTools for CSS Grid, but Chrome is about to catch up and go one bit better by visualizing grid line numbers and names.Firefox supports gap for display: flex,\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/functional-css.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":334838,"url":"https:\/\/css-tricks.com\/things-you-can-do-with-css-today\/","url_meta":{"origin":326473,"position":3},"title":"Things You Can Do With CSS Today","date":"February 17, 2021","format":false,"excerpt":"Some nice coverage from Andy about CSS things that are truly new. If you haven't looked at new things in CSS in, say, a year, I'd bet pretty much all of this will be new to you. A lot of it is cutting-edge enough that you might not be able\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":372539,"url":"https:\/\/css-tricks.com\/when-do-you-use-css-columns\/","url_meta":{"origin":326473,"position":4},"title":"When Do You Use CSS Columns?","date":"August 18, 2022","format":false,"excerpt":"That ain't rhetorical: I'm really interested in finding great use cases for CSS multi-column layouts. The answer seems straightforward. Use columns when you want to split any content into columns, right? Here is generally the sort of example you'll find in articles that show how CSS mutli-column layouts work, including\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/inline-block-columns.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":279102,"url":"https:\/\/css-tricks.com\/piecing-together-approaches-for-a-css-masonry-layout\/","url_meta":{"origin":326473,"position":5},"title":"Approaches for a CSS Masonry Layout","date":"January 11, 2019","format":false,"excerpt":"Masonry layout, on the web, is when items of an uneven size are laid out such that there aren't uneven gaps. I would guess the term was coined (or at least popularized) for the web by David DeSandro because of his popular Masonry JavaScript library, which has been around since\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/gray-brick-wall.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/pure-css-masonry.jpg?fit=1024%2C704&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/326473"}],"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=326473"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/326473\/revisions"}],"predecessor-version":[{"id":326585,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/326473\/revisions\/326585"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/326474"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=326473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=326473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=326473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}