technology preview builds<\/a>). So if your grid, flex, or multicolumn content needs a bit more space to breathe, get ready to fall into the gap!<\/p>\n","protected":false},"excerpt":{"rendered":"At first, there were flexboxes (the children of a display: flex container). If you wanted them to be visually separate, you had to use content justification (i.e. justify-content: space-between), margin trickery, or sometimes, both. Then along came grids (a display: grid container), and grids could have not-margin not-trickeried minimum gaps between grid cells, thanks to […]<\/p>\n","protected":false},"author":258657,"featured_media":337844,"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":"Here's @meyerweb on the CSS `gap` property and how it works in Grid, Flexbox and Multicolumn layouts.","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\/2021\/04\/gap.png?fit=1713%2C901&ssl=1","jetpack-related-posts":[{"id":20228,"url":"https:\/\/css-tricks.com\/w3conf-eric-meyer-the-era-of-intentional-layout\/","url_meta":{"origin":336967,"position":0},"title":"[W3Conf] Eric Meyer: “The Era of Intentional Layout”","date":"February 22, 2013","format":false,"excerpt":"Eric Meyer (@meyerweb) is a CSS champion, author, and co-founder of the An Event Apart conferences. He talked about the end of an era of layout (and the beginning of a new one). These are my notes from his presentation at W3Conf in San Francisco as part of this live\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":351481,"url":"https:\/\/css-tricks.com\/minding-the-gap\/","url_meta":{"origin":336967,"position":1},"title":"Minding the “gap”","date":"September 16, 2021","format":false,"excerpt":"You might already know about the CSS gap property. It isn\u2019t exactly new, but it did gain an important new ability last year: it now works in Flexbox in addition to CSS Grid. That, and the fact that I believe the property is more complicated than it appears, made me\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/z8fc2xmA.jpeg?fit=1200%2C1003&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":317422,"url":"https:\/\/css-tricks.com\/a-lightweight-masonry-solution\/","url_meta":{"origin":336967,"position":2},"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":257517,"url":"https:\/\/css-tricks.com\/difference-explicit-implicit-grids\/","url_meta":{"origin":336967,"position":3},"title":"The Difference Between Explicit and Implicit Grids","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 "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":282798,"url":"https:\/\/css-tricks.com\/what-we-want-from-grid\/","url_meta":{"origin":336967,"position":4},"title":"What We Want from Grid","date":"February 26, 2019","format":false,"excerpt":"We felt spoiled with CSS grid for a minute there. It arrived hot and fast in all the major browsers all at once. Now that we're seeing a lot more usage, we're seeing people want more from grid. Michelle Barker lists hers wants (and I'll put my commentary after): Styling\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/grid-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":310839,"url":"https:\/\/css-tricks.com\/flexbox-like-just-put-elements-in-a-row-with-css-grid\/","url_meta":{"origin":336967,"position":5},"title":"Flexbox-like “just put elements in a row” with CSS grid","date":"May 21, 2020","format":false,"excerpt":"It occurred to me while we were talking about flexbox and gap that one reason we sometimes reach for flexbox is to chuck some boxes in a row and space them out a little. My brain still reaches for flexbox in that situation, and with gap, it probably will continue\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/grid-auto-flow-column.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/336967"}],"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\/258657"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=336967"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/336967\/revisions"}],"predecessor-version":[{"id":337846,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/336967\/revisions\/337846"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/337844"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=336967"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=336967"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=336967"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}