Two sentences from Rachel Andrew that explain when to reach for which layout choice:<\/p>\n

Flexbox is essentially for laying out items in a single dimension \u2013 in a row OR a column. Grid is for layout of items in two dimensions \u2013 rows AND columns.<\/p><\/blockquote>\n

Flexbox can wrap, making it sorta-kinda two dimensions, but it still flows in a single dimension.<\/p>\n","protected":false},"excerpt":{"rendered":"

Two sentences from Rachel Andrew that explain when to reach for which layout choice: Flexbox is essentially for laying out […]<\/p>\n","protected":false},"author":223806,"featured_media":0,"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":false,"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":[532,686],"class_list":["post-240457","post","type-post","status-publish","format-standard","hentry","category-links","tag-flexbox","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":"","jetpack-related-posts":[{"id":314446,"url":"https:\/\/css-tricks.com\/grid-for-layout-flexbox-for-components\/","url_meta":{"origin":240457,"position":0},"title":"Grid for layout, flexbox for components","author":"Robin Rendle","date":"June 25, 2020","format":false,"excerpt":"When should we reach for CSS grid and when should we use flexbox? Rachel Andrew wrote about this very conundrum way back in 2016: Flexbox is essentially for laying out items in a single dimension \u2013 in a row OR a column. Grid is for layout of items in two\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/grid-vs-flexbox.png?fit=1200%2C592&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/grid-vs-flexbox.png?fit=1200%2C592&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/grid-vs-flexbox.png?fit=1200%2C592&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/grid-vs-flexbox.png?fit=1200%2C592&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/grid-vs-flexbox.png?fit=1200%2C592&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":253164,"url":"https:\/\/css-tricks.com\/css-grid-replace-flexbox\/","url_meta":{"origin":240457,"position":1},"title":"Does CSS Grid Replace Flexbox?","author":"Robin Rendle","date":"March 31, 2017","format":false,"excerpt":"No. Well. Mostly No. Grid is much newer than Flexbox and has a bit less browser support. That's why it makes perfect sense if people are wondering if CSS grid is here to replace Flexbox. To put a point on it: Grid can do things Flexbox can't do. Flexbox can\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":281193,"url":"https:\/\/css-tricks.com\/quick-whats-the-difference-between-flexbox-and-grid\/","url_meta":{"origin":240457,"position":2},"title":"Quick! What’s the Difference Between Flexbox and Grid?","author":"Chris Coyier","date":"February 12, 2019","format":false,"excerpt":"Let's go rapid fire and try to answer this question with quick points rather than long explanations. There are a lot of similarities between flexbox and grid, starting with the fact that they are used for layout and much more powerful than any layout technique that came before them. They\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\/2018\/05\/unicode-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/unicode-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/unicode-pattern.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/unicode-pattern.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/unicode-pattern.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":265204,"url":"https:\/\/css-tricks.com\/new-flexbox-guides-mdn\/","url_meta":{"origin":240457,"position":3},"title":"New flexbox guides on MDN","author":"Geoff Graham","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 "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":277868,"url":"https:\/\/css-tricks.com\/use-cases-for-flexbox\/","url_meta":{"origin":240457,"position":4},"title":"Use Cases for Flexbox","author":"Chris Coyier","date":"October 23, 2018","format":false,"excerpt":"I remember when I first started to work with flexbox that the world looked like flexible boxes to me. It's not that I forgot how floats, inline-block, or any other layout mechanisms work, I just found myself reaching for flexbox by default. Now that grid is here and I find\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/flexbox.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/flexbox.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/flexbox.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/flexbox.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/flexbox.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":282730,"url":"https:\/\/css-tricks.com\/ie10-compatible-grid-auto-placement-with-flexbox\/","url_meta":{"origin":240457,"position":5},"title":"IE10-Compatible Grid Auto-Placement with Flexbox","author":"Brian Holt","date":"February 18, 2019","format":false,"excerpt":"If you work on web applications that support older browsers, and have lusted after CSS Grid from the sidelines like I have, I have some good news: I've discovered a clever CSS-only way to use grid auto-placement in IE10+! Now, it's not actually CSS Grid, but without looking at the\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\/2018\/12\/grid-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/grid-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/grid-guide.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/grid-guide.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/grid-guide.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/240457","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\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=240457"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/240457\/revisions"}],"predecessor-version":[{"id":240507,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/240457\/revisions\/240507"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=240457"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=240457"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=240457"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}