{"id":314446,"date":"2020-06-25T19:24:12","date_gmt":"2020-06-26T02:24:12","guid":{"rendered":"https:\/\/css-tricks.com\/?p=314446"},"modified":"2020-06-25T19:24:13","modified_gmt":"2020-06-26T02:24:13","slug":"grid-for-layout-flexbox-for-components","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/grid-for-layout-flexbox-for-components\/","title":{"rendered":"Grid for layout, flexbox for components"},"content":{"rendered":"\n

When should we reach for CSS grid and when should we use flexbox? Rachel Andrew wrote about this very conundrum way back in 2016:<\/a><\/p>\n\n\n\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\n\n\n

Ahmad Shadeed wrote a post where he gives the same advice, but from a different angle. He argues we should use grid for layout and flexbox for components<\/a>: <\/p>\n\n\n\n

Remember that old layout method might be perfect for the job. Overusing flexbox or grid can increase the complexity of your CSS by time. I don\u2019t mean they are complex, but using them correctly<\/strong> and in the right context as explained from the examples in this article is much better.<\/p><\/blockquote>\n\n\n\n

Speaking of which, there\u2019s so many great layout examples in this post, too.<\/p>\n","protected":false},"excerpt":{"rendered":"

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 dimensions \u2013 rows AND columns. […]<\/p>\n","protected":false},"author":223806,"featured_media":314456,"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":[17],"tags":[532,686],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/grid-vs-flexbox.png?fit=1286%2C634&ssl=1","jetpack-related-posts":[{"id":240457,"url":"https:\/\/css-tricks.com\/use-grid-flexbox\/","url_meta":{"origin":314446,"position":0},"title":"Should I use Grid or Flexbox?","date":"April 13, 2016","format":false,"excerpt":"Two sentences from Rachel Andrew that explain when to reach for which layout choice: 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. Flexbox can wrap, making it\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":253164,"url":"https:\/\/css-tricks.com\/css-grid-replace-flexbox\/","url_meta":{"origin":314446,"position":1},"title":"Does CSS Grid Replace Flexbox?","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 "Article"","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":314446,"position":2},"title":"Quick! What’s the Difference Between Flexbox and Grid?","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 "Article"","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},"classes":[]},{"id":265204,"url":"https:\/\/css-tricks.com\/new-flexbox-guides-mdn\/","url_meta":{"origin":314446,"position":3},"title":"New flexbox guides on MDN","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 "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":277868,"url":"https:\/\/css-tricks.com\/use-cases-for-flexbox\/","url_meta":{"origin":314446,"position":4},"title":"Use Cases for Flexbox","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 "Link"","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},"classes":[]},{"id":279102,"url":"https:\/\/css-tricks.com\/piecing-together-approaches-for-a-css-masonry-layout\/","url_meta":{"origin":314446,"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":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/314446"}],"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=314446"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/314446\/revisions"}],"predecessor-version":[{"id":314455,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/314446\/revisions\/314455"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/314456"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=314446"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=314446"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=314446"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}