CSS Layouts: Box Model vs Flexbox vs Grid
CSS layouts have evolved rapidly over the past few years. While frameworks like Bootstrap and Foundation have largely simplified layout implementation, native CSS advancements have made it even easier to design responsive UIs. In this article, we discuss the difference between CSS box model, flexbox, and grid layouts. We'll examine what makes each unique and explain the advantages and disadvantages of using each.
CSS Box Model
The box model has been around the longest and remains a viable approach to layout design. It relies on margins, borders, and padding to define the spacial relationships between UI elements. Using things like float and clear, these "boxes" of content can be aligned both vertically and horizontally on the page.
Advantages
The box model has been around for a long time and is the most widely supported by browsers. You'll experience the fewest rendering inconsistencies using the box model.
Disadvantages
While the box model is fairly easy to understand, it relies on a janky combination of floats and clears to make things work. If you want to achieve a truly responsive design, you'll have to supplement your layout with more media queries using the box model.
CSS Flexbox
Flexbox is a more recently released layout feature that emphasizes responsive design. Using flexbox, you can specify how elements should grow/shrink to fit different screen sizes. Parent flex container divs contain flex items in either a vertical or horizontal direction.
Advantages
Flexbox provides a simpler syntax for controlling layout. You don't have to rely on a janky combination of floats and clears or media queries to make things responsive. By specifying a flex direction, flexbox makes it easy to render components like navigation menus and side bars.
Disadvantages
While flexbox is supported by most major browsers, it's still newer than the traditional box model. This means older browsers don't support it as well (some not at all). There are also more inconsistencies across different browsers. Flexbox also gets complicated with more complex layouts and is limited to only one direction (horizontal or vertical).
CSS Grid
As of March 2017, the CSS grid layout is recognized and supported by most major browsers. Unlike flexbox, grid allows you to define layouts with both rows and columns. This results in a "2D" specification where you can better control vertical and horizontal relationships between elements.
Advantages
Grids reduce the need for complicated media queries and provide the added advantage of 2D layouts over flexbox.
Disadvantages
Grids are still very new and therefore only partially supported by major browsers. Designing grid layouts that consistently render for different browsers remains a major challenge.
Difference between CSS grid and Bootstrap
While CSS frameworks like Bootstrap implement grid-like layouts, they are not the same thing as CSS grids. In fact, the grid layout was developed so CSS could natively support grid-like implementations already seen with Bootstrap and Foundation.
Conclusion
While the different CSS layouts have their advantages and disadvantages, they can (and should) be used together. For example, a parent grid layout could be used with children flex layouts for individual components. Browser support is also one of the biggest caveats with using the more progressive flexbox and grid layouts. To see the latest browser support for different CSS properties, you can visit caniuse.com.
