From the course: CSS Layouts: From Float to Flexbox and Grid

Grid vs. Flexbox - CSS Tutorial

From the course: CSS Layouts: From Float to Flexbox and Grid

Start my 1-month free trial

Grid vs. Flexbox

“

- [Narrator] The main difference between Grid and Flexbox is Flexbox was designed for one dimensional layouts either a row or column. But as we seen in our last layout exercise there are ways to use Flexbox to create the look of rows and columns by either wrapping the flex items or nesting the flex boxes. But even with these techniques flex still only works in one dimension. While this isn't necessarily a bad thing Grid is generally better for working with rows and columns at the same time. That's what it was designed for. For example, Grid creates layouts that align along both dimensions even if the boxes aren't the same size or in the same position. In Flexbox layouts each row or column aligns it's items independently from other rows or columns. Between these two models, Grid is newer but now that both layout modules are W3C recommendations it doesn't mean that Grid will replace Flexbox. They each have their own specialties. While both of these methods can be useful for layouts, Flexbox is great for space distribution of items within the same axis. A great use case would be for a horizontal navigation since the items are arranged in one direction. Grid is ideal for layouts that require more control with rows and columns. They can also be used together. For example, you may create the page layout with Grid, but align your horizontal nav with Flexbox. The two layout modules do share some common features and properties. So as we go through the specification some parts of it will feel familiar since we just learned about Flexbox.

Contents