Great tutorial<\/a> from Alex Trost (based on some demos, like this one<\/a>, from Andy Barefoot) showcasing how, while CSS grid has straight grid lines across and down, you can place items across grid lines creating a staggered effect that looks pretty rad. Grid-like, but it appears to align to diagonal lines rather than horizontal and vertical lines because of the staggering. And you still get all the flexibility of grid!<\/p>\n\n\n\n\n\n\n\n<\/video><\/figure>\n\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"Great tutorial from Alex Trost (based on some demos, like this one, from Andy Barefoot) showcasing how, while CSS grid […]<\/p>\n","protected":false},"author":3,"featured_media":326016,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_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,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[17],"tags":[686],"class_list":["post-326010","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-links","tag-grid"],"acf":{"link_source":"","link_url":"","link_icon":null,"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/book-grid-min.jpg?fit=1206%2C690&ssl=1","jetpack-related-posts":[{"id":255565,"url":"https:\/\/css-tricks.com\/breaking-css-grid-explained\/","url_meta":{"origin":326010,"position":0},"title":"Breaking Out with CSS Grid Explained","author":"Geoff Graham","date":"June 6, 2017","format":false,"excerpt":"Tyler Sticka shared a slick technique for breaking out content in a CSS Grid layout, but Rachel Andrew goes the extra mile to explain why the technique works: When you name lines, you can optionally name them as *-start and *-end and this gives you a little more grid magic.\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":257333,"url":"https:\/\/css-tricks.com\/browser-compatibility-css-grid-layouts-simple-sass-mixins\/","url_meta":{"origin":326010,"position":1},"title":"Browser Compatibility for CSS Grid Layouts with Simple Sass Mixins","author":"Farley Reynolds","date":"August 8, 2017","format":false,"excerpt":"According to an article from A List Apart about CSS Grid, a \"new era in digital design is dawning right now.\" With Flexbox and Grid, we have the ability to create layouts that used to be extremely difficult to implement, if not impossible. There's an entirely new system available for\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":460,"url":"https:\/\/css-tricks.com\/gridcontrol-a-grid-overlay-system-for-design-development\/","url_meta":{"origin":326010,"position":2},"title":"GridControl: A Grid Overlay System for Design Development.","author":"Chris Coyier","date":"January 18, 2008","format":false,"excerpt":"Designing by grid is as old as design itself. Grids are a fundamental concept to design that transcend trends. Long after the shiny, sans-serify, reflective shadows of web 2.0 are gone, grids will still be here. When we access digital media through implants in our brain and see the internet\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":283245,"url":"https:\/\/css-tricks.com\/look-ma-no-media-queries-responsive-layouts-using-css-grid\/","url_meta":{"origin":326010,"position":3},"title":"Look Ma, No Media Queries! Responsive Layouts Using CSS Grid","author":"Juan Mart\u00edn Garc\u00eda","date":"February 26, 2019","format":false,"excerpt":"Not only has CSS Grid reshaped the way we think and build layouts for the web, but it has also contributed to writing more resilient code, replacing \"hacky\" techniques we've used before, and in some cases, killing the need to rely on code for specific resolutions and viewports. What's so\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/bike-pavement.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/bike-pavement.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/bike-pavement.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/bike-pavement.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/bike-pavement.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":257517,"url":"https:\/\/css-tricks.com\/difference-explicit-implicit-grids\/","url_meta":{"origin":326010,"position":4},"title":"The Difference Between Explicit and Implicit Grids","author":"Manuel Matuzovic","date":"August 10, 2017","format":false,"excerpt":"Grid Layout finally gives us the ability to define grids in CSS and place items into grid cells. This on its own is great, but the fact that we don't have to specify each track and we don't have to place every item manually makes the new module even better.\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":256695,"url":"https:\/\/css-tricks.com\/collection-interesting-facts-css-grid-layout\/","url_meta":{"origin":326010,"position":5},"title":"A Collection of Interesting Facts about CSS Grid Layout","author":"Manuel Matuzovic","date":"July 21, 2017","format":false,"excerpt":"A few weeks ago I held a CSS Grid Layout workshop. Since I'm, like most of us, also pretty new to the topic, I learned a lot while preparing the slides and demos. I decided to share some of the stuff that was particularly interesting to me, with you. Have\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/326010","targetHints":{"allow":["GET"]}}],"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=326010"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/326010\/revisions"}],"predecessor-version":[{"id":326032,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/326010\/revisions\/326032"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/326016"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=326010"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=326010"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=326010"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/p>\n","protected":false},"excerpt":{"rendered":"
Great tutorial from Alex Trost (based on some demos, like this one, from Andy Barefoot) showcasing how, while CSS grid […]<\/p>\n","protected":false},"author":3,"featured_media":326016,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_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,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[17],"tags":[686],"class_list":["post-326010","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-links","tag-grid"],"acf":{"link_source":"","link_url":"","link_icon":null,"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/book-grid-min.jpg?fit=1206%2C690&ssl=1","jetpack-related-posts":[{"id":255565,"url":"https:\/\/css-tricks.com\/breaking-css-grid-explained\/","url_meta":{"origin":326010,"position":0},"title":"Breaking Out with CSS Grid Explained","author":"Geoff Graham","date":"June 6, 2017","format":false,"excerpt":"Tyler Sticka shared a slick technique for breaking out content in a CSS Grid layout, but Rachel Andrew goes the extra mile to explain why the technique works: When you name lines, you can optionally name them as *-start and *-end and this gives you a little more grid magic.\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":257333,"url":"https:\/\/css-tricks.com\/browser-compatibility-css-grid-layouts-simple-sass-mixins\/","url_meta":{"origin":326010,"position":1},"title":"Browser Compatibility for CSS Grid Layouts with Simple Sass Mixins","author":"Farley Reynolds","date":"August 8, 2017","format":false,"excerpt":"According to an article from A List Apart about CSS Grid, a \"new era in digital design is dawning right now.\" With Flexbox and Grid, we have the ability to create layouts that used to be extremely difficult to implement, if not impossible. There's an entirely new system available for\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":460,"url":"https:\/\/css-tricks.com\/gridcontrol-a-grid-overlay-system-for-design-development\/","url_meta":{"origin":326010,"position":2},"title":"GridControl: A Grid Overlay System for Design Development.","author":"Chris Coyier","date":"January 18, 2008","format":false,"excerpt":"Designing by grid is as old as design itself. Grids are a fundamental concept to design that transcend trends. Long after the shiny, sans-serify, reflective shadows of web 2.0 are gone, grids will still be here. When we access digital media through implants in our brain and see the internet\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":283245,"url":"https:\/\/css-tricks.com\/look-ma-no-media-queries-responsive-layouts-using-css-grid\/","url_meta":{"origin":326010,"position":3},"title":"Look Ma, No Media Queries! Responsive Layouts Using CSS Grid","author":"Juan Mart\u00edn Garc\u00eda","date":"February 26, 2019","format":false,"excerpt":"Not only has CSS Grid reshaped the way we think and build layouts for the web, but it has also contributed to writing more resilient code, replacing \"hacky\" techniques we've used before, and in some cases, killing the need to rely on code for specific resolutions and viewports. What's so\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/bike-pavement.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/bike-pavement.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/bike-pavement.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/bike-pavement.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/bike-pavement.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":257517,"url":"https:\/\/css-tricks.com\/difference-explicit-implicit-grids\/","url_meta":{"origin":326010,"position":4},"title":"The Difference Between Explicit and Implicit Grids","author":"Manuel Matuzovic","date":"August 10, 2017","format":false,"excerpt":"Grid Layout finally gives us the ability to define grids in CSS and place items into grid cells. This on its own is great, but the fact that we don't have to specify each track and we don't have to place every item manually makes the new module even better.\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":256695,"url":"https:\/\/css-tricks.com\/collection-interesting-facts-css-grid-layout\/","url_meta":{"origin":326010,"position":5},"title":"A Collection of Interesting Facts about CSS Grid Layout","author":"Manuel Matuzovic","date":"July 21, 2017","format":false,"excerpt":"A few weeks ago I held a CSS Grid Layout workshop. Since I'm, like most of us, also pretty new to the topic, I learned a lot while preparing the slides and demos. I decided to share some of the stuff that was particularly interesting to me, with you. Have\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/326010","targetHints":{"allow":["GET"]}}],"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=326010"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/326010\/revisions"}],"predecessor-version":[{"id":326032,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/326010\/revisions\/326032"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/326016"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=326010"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=326010"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=326010"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}