Let us begin with the basic understanding of CSS Grid and Flexbox

CSS Grid:

CSS Grid layout allows us to align the elements in two dimensional grid system i.e., both in rows and columns

Flexbox:

Flexible Box Layout Module, popularly known as Flexbox allows flexible layouts but in single dimension at a time, i.e.,either a row or a column

Flexbox vs CSS Grid

One dimensional – Two dimensional

With Flexbox, we can align a few items in a certain way very quickly and have them responsive across different browsers

Flexbox gives more flexibility, requires minimal code and is easier to maintain than CSS Grid for one dimensional layout

If we are styling a page in a mix of both rows and columns, then we should use CSS Grid over Flexbox

For a two-dimensional layout scenario CSS Grid gives more readability and maintainability with simpler markup when compared to Flexbox, as nesting flex properties for this purpose can be confusing for anyone trying to read the code

In the above example it would be perfect to use Flexbox to align content in the header area and CSS Grid to design the entire layout.

It is better to consider using Flexbox and CSS Grid as a combination for one dimensional and two dimensional purposes respectively while designing a layout.

Content – Layout

Flexbox works from the content-out approach, if we have a set of items to be aligned with a flexbox then the size of the content decides how much space each element takes up

CSS Grid works from the layout-in approach, when we use CSS Grid we first create a layout and then place the items into the layout. We start with designing the columns width first and then we place the items in the available grid cells.

This approach forces us to decide on number of columns we want to split our layout into before placing the content.

Let us discuss the example of designing a header with both CSS Grid and Flexbox

Flexbox:

We will use the below code for creating the header in  the above image using Flexbox. We use the display flex property for displaying the elements in a row

To position the logout to the far right corner we set the margin-left property to auto by simply targeting that particular item

Here we have let the elements decide their placement in a Layout and we did not predefine anything except for the display: flex; property

CSS Grid:

Let us consider creating a header with the CSS Grid approach now

Below code is used to create the header using CSS Grid

It looks identical to the flexbox solution, but when we take a close look at the code, we find that we have defined the number of columns(3 in this example) the layout would be divided into well in advance.

 

We need to have a clear idea on how our layout will be designed, how many number of columns will it be needed to split into with the CSS Grid approach

If there are going to be more number of items in the header, then we will be defining the grid-template-columns option accordingly.

Flexbox and CSS Grid combined

Let us now consider styling a page combining both Flexbox and CSS Grid

Markup:

CSS:

Understanding the above CSS:

grid-template-columns divides the layout into 2 columns, one with 75px wide and other to  be auto, occupying the remaining width based on the screen resolution making it stretch and shrink horizontally

grid-template-rows divides the layout into 3 rows, first and the last with a fixed 40px in height and the second one to be auto, occupying the remaining height based on the screen resolution making it stretch and shrink vertically.

grid-column property says from which column an element starts and till where is it spanned. For example if we specify grid-column: 1/-1, 1 here denotes that an element needs to be started from first column while -1 denotes that an element needs to be spanned till the last column.

First we have styled our items using the CSS Grid – 2 column and 3 row layout, then we have turned the header which is a CSS Grid element  to a flexbox container resulting the below output

In conclusion, CSS Grid and Flexbox have their own unique strengths from the other and since both are two different things, they can be easily used together rather in place of one other. We can always map out the layout of the page using CSS Grid, and align the single dimensions of items using Flexbox as we did in the above example.

Browser Support

CSS Grid:

Flexbox:

References: