Differences between CSS Flexbox and CSS Grid

One of the things we have to do as developers is to figure out how to approach a problem when given a new project to do. When working with responsive websites, we’ll quite often choose between CSS Grid and CSS Flexbox to layout our website. This article will attempt to discern the differences between Grid and Flexbox, and when it would be best to choose one over the other. 

Flexbox – A Brief Overview

CSS Flexbox is basically a responsive box model. It allows for better positioning within a container and is fairly easy to implement as long as you are aware of its abilities. 

The flexible box model still uses all of the properties of the box model to control margin, padding, border, and content. When we set display: flex on a parent container, it opens up all the flex properties that will be used on that parent’s children.

Selection of Flexbox Properties:

• flex-direction: column | row* | column-reverse | row-reverse
• flex-wrap: wrap | nowrap* | wrap-reverse
• flex-flow: shortcut for the first two properties listed – it will follow format flex-flow: <flex-direction> <flex-wrap>;
• justify-content: spaces items along the main axis. When flex-direction is set to row, the main axis is the horizontal axis. When set to column, the main access is the vertical axis. 
  • justify-content: flex-start* | flex-end | center | space-evenly | space-around | space-between
• align-items: spaces items along the axis opposite the main access. When flex-direction is set to column, that would be the vertical axis. When set to row, that would be the horizontal axis. 
  • align-items: stretch* |center |flex-start |flex-end |baseline
• align-self: this is allowed to be used on flex items whose parents have declared their display property as ‘flex’. It controls the alignment in the flex container. 
  • align-self: auto* | stretch | center | flex-start | flex-end | baseline

*  – default setting of property

CSS Grid – A Brief Overview

CSS Grid is another layout model that’s available to use. It’s a little newer than the CSS Flexbox Model, so browser support isn’t as widely available for CSS Grid as it is for Flexbox. We have the ability to create a 2D layout in columns and rows with meticulously placed positioning. When we set display: grid on our parent element, it allows for us to use the common grid properties that are available to us.

Selection of CSS Grid Properties

• grid-gap, grid-column-gap, grid-row-gap:  This is used to basically set the spacing. Grid gap is a shortcut for controlling both column and row gap. 
• grid-template-columns, grid-template-rows: This allows for basic formatting of the containers in your grid – how wide the columns will be, how high the height will be on the rows, how many containers will be in each row, etc. 
• justify-content: Aligns the whole grid horizontally.
• align-content: Aligns the whole grid vertically.
• grid-column, grid-row: Allows us to declare how wide or how high we would like our grid items. 

Which One Do I Choose? 

The properties in CSS Flexbox allow for a design that is one-dimensional layout: you can either set up your layout to be created using rows or columns. This is great for web pages that focus less on content placement and more on the flexibility in the responsive design. 

In contrast, CSS Grid allows you to create layouts in a two dimensional space: with rows and columns. There are properties that control the layout and width and height of each container in the grid. So you can end up with grids that look very similar to the stained glass window posted at the top of this blog. 

If you’re focused on content placement and want to control your child containers in space, Grid is the layout format for you. Flexbox focuses more on the flow of the content rather than the placement. 

Browser support for Grid is not as widespread as it is for Flexbox – simply because I think Flexbox is a little older than Grid. That may be a consideration when choosing which layout model to use in your project. 

Conclusion

Whichever layout model you choose, they are both valid options for solving the problem. It’s just a matter of what the project’s purpose is that really determines if you choose CSS Flex layout or CSS Grid layout.