{"id":3033,"date":"2022-05-07T11:31:13","date_gmt":"2022-05-07T11:31:13","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3033"},"modified":"2023-06-12T14:31:28","modified_gmt":"2023-06-12T14:31:28","slug":"css-tutorial-native-css-masonry-layout-in-css-grid","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-tutorial-native-css-masonry-layout-in-css-grid\/","title":{"rendered":"CSS Tutorial &#8211; Native CSS Masonry Layout In CSS Grid"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; <a href=\"https:\/\/www.smashingmagazine.com\/native-css-masonry-layout-css-grid\/\" rel=\"noopener\">Rachel Andrew introducing<\/a>\u00a0the 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\u00a0already do it\u00a0for the most part, but there is just one thing that makes it hard: doing the vertical-staggering\u00a0<em>and<\/em>\u00a0having a left-to-right source order. So that\u2019s what this new ability will solve in addition to it just being less hacky in general.<\/p>\n<p>You can already test a partial implementation in Firefox Nightly by enabling\u00a0<code>layout.css.grid-template-masonry-value.enabled<\/code>.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.container {\r\n  display: grid;\r\n  grid-template-columns: repeat(4, 1fr);\r\n  grid-template-rows: masonry;\r\n}<\/pre>\n<p>I like the\u00a0<code>grid-template-rows: masonry;<\/code>\u00a0syntax because I think it clearly communicates:\u00a0<em>\u201cYou aren\u2019t setting these rows. In fact, there aren\u2019t even really rows at all anymore, we\u2019ll take care of that.\u201d<\/em>\u00a0Which I guess means there are no rows to inherit in subgrid, which also makes sense.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; Rachel Andrew introducing\u00a0the fact that masonry layout is going <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/css-tutorial-native-css-masonry-layout-in-css-grid\/\" title=\"CSS Tutorial &#8211; Native CSS Masonry Layout In CSS Grid\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3748,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,2],"tags":[268,197,271,103,227],"newstopic":[],"class_list":{"0":"post-3033","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css","8":"category-web-design","9":"tag-css-grid","10":"tag-css-tutorial","11":"tag-masonry-layout","12":"tag-web-design","13":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3033","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3033"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3033\/revisions"}],"predecessor-version":[{"id":3034,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3033\/revisions\/3034"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3748"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3033"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3033"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3033"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3033"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}