{"id":23478,"date":"2018-12-15T11:00:31","date_gmt":"2018-12-15T11:00:31","guid":{"rendered":"https:\/\/getflywheel.com\/?p=23478"},"modified":"2025-04-25T08:52:30","modified_gmt":"2025-04-25T13:52:30","slug":"combine-flexbox-and-css-grids-for-layouts-how-to","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/combine-flexbox-and-css-grids-for-layouts-how-to\/","title":{"rendered":"How To Combine Flexbox and CSS Grids for Efficient Layouts"},"content":{"rendered":"\n

Editor’s note: This guest post was written by Abbey Fitzgerald<\/a> a UX software engineer and web designer who loves the art of crafting code.<\/em><\/p>\n\n\n\n

In the past, CSS float properties were one of the main methods for arranging elements on a website. And if you\u2019ve ever worked that way, you know that it\u2019s not always ideal for complex layouts. Luckily in the modern era of web design, aligning elements has become much more streamlined thanks to Flexbox and CSS Grids.<\/p>\n\n\n\n

When Flexbox came along, it made alignment much easier and has since been widely adopted. CSS Grid Layouts<\/a> have also created a lot of excitement in the web design community. A while back, we took a look at how to create a basic CSS Grid Layout<\/a>. Although it is not widely adopted, browsers are starting to adopt support for it. When it is fully supported, this will have a great impact on designs. Browser support is increasing all the time; be sure to check out Can I Use<\/a> for the most up-to-date information.<\/p>\n\n\n\n

Now you may be wondering what\u2019s next; after all, Flexbox and CSS Grid Layouts seem to accomplish similar results. It\u2019s not a Flexbox versus Grid debate, however, but more of learning how to use them together. The more I\u2019ve played around with both Grid and Flexbox, I\u2019ve found that you don\u2019t have to choose just one or the other. In the near future, when CSS Grid Layouts have full browser support, designers will be able to take the combined advantages of each and create the most efficient and interesting designs.<\/p>\n\n\n\n

Testing Basic Flexbox and CSS Grid Layouts<\/h2>\n\n\n\n

In order to determine if Flexbox or CSS Grid works better for your development workflow, creating a standard layout that only uses one or the other is a good way to see how they work and if there are advantages of one over the another. We\u2019ll start with a  very simple and very familiar layout type with a header, sidebar, main content, and footer. A simple layout like this is a quick way to get the various elements positioned.<\/p>\n\n\n\n

And remember, you should never make changes on your live site. Try experimenting with Local <\/a>instead, a free local WordPress development app. Download it today!<\/p>\n\n\n\n

How To Create a Layout With Flexbox<\/h2>\n\n\n\n

Recently, I covered the subject of creating a Flexbox card layout. That post goes into detail about how Flexbox works along with specific CSS information, so if you\u2019re a beginner to Flexbox, it will help you get familiar with how it works.<\/p>\n\n\n\n

\"Screenshot<\/figure>\n\n\n\n

For this tutorial, here\u2019s what we\u2019ll be building:
<\/p>\n\n\n\n

See this on Codepen<\/a>.<\/p>\n\n\n\n

For this basic layout, the main Flexbox tasks include:<\/p>\n\n\n\n