{"id":262,"date":"2022-11-03T06:37:20","date_gmt":"2022-11-03T13:37:20","guid":{"rendered":"https:\/\/www.a-j-c.com\/?p=262"},"modified":"2022-11-03T06:37:20","modified_gmt":"2022-11-03T13:37:20","slug":"flexbox-vs-grid","status":"publish","type":"post","link":"https:\/\/www.a-j-c.com\/welcome\/2022\/11\/03\/flexbox-vs-grid\/","title":{"rendered":"Flexbox vs Grid"},"content":{"rendered":"\n

With web development, there are two main choices to how to layout the display – flexbox or grid. In order to better understand the advantages and use cases of each, this post briefly explores each.<\/p>\n\n\n\n

Flexbox<\/h2>\n\n\n\n

Most of what I’ve read describes the use case of flexbox as 1 dimensional. Really what this means is each flexbox is a row. So, when you want control over each row as the overall box, flexbox is your option. <\/p>\n\n\n\n

<div class=\"flexbox-container>\n    <p>Div text goes here<\/p>\n<\/div>\n\n.flexbox-container {\n  display: flex;\n}<\/code><\/pre>\n\n\n\n
Grid<\/h2>\n\n\n\n
Now, if you read about Grid, you’ll find this described as 2 dimensional. This covers both rows and columns. With grid, you’re creating exactly that, a grid layout defining the rows and columns (yes, like a table). <\/p>\n\n\n\n
So, which do you use?<\/h2>\n\n\n\n
Easy answer here, both. Why? Because you can use both together. You can put a flexbox inside of a grid, or a grid inside of a flexbox. Of course, you don’t actually need to do this. You can use one or the other. Point is, you’ve got options and it’s about selecting the right tool for the job – as usual.<\/p>\n","protected":false},"excerpt":{"rendered":"
With web development, there are two main choices to how to layout the display –…<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1],"tags":[],"class_list":["post-262","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/www.a-j-c.com\/welcome\/wp-json\/wp\/v2\/posts\/262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.a-j-c.com\/welcome\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.a-j-c.com\/welcome\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.a-j-c.com\/welcome\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.a-j-c.com\/welcome\/wp-json\/wp\/v2\/comments?post=262"}],"version-history":[{"count":2,"href":"https:\/\/www.a-j-c.com\/welcome\/wp-json\/wp\/v2\/posts\/262\/revisions"}],"predecessor-version":[{"id":283,"href":"https:\/\/www.a-j-c.com\/welcome\/wp-json\/wp\/v2\/posts\/262\/revisions\/283"}],"wp:attachment":[{"href":"https:\/\/www.a-j-c.com\/welcome\/wp-json\/wp\/v2\/media?parent=262"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.a-j-c.com\/welcome\/wp-json\/wp\/v2\/categories?post=262"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.a-j-c.com\/welcome\/wp-json\/wp\/v2\/tags?post=262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}