Designing a Layout using CSS Grid & Flexbox

Published in

js@imaginea

5 min readJul 18, 2018

In this article, we’ll build a layout using CSS Grid and Flexbox. But first, let us begin with a 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.

Syntax - display: grid;

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

Syntax - display: flex;

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.

header {   display: flex;}

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

header > div:nth-child(3) {   margin-left : auto;}

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

header {   display: grid;   grid-template-columns: 1fr 7fr 1fr;}

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:

<div class="container">
       <header>
           <div>HOME</div>
           <div>SEARCH</div>
           <div>LOGOUT</div>
      </header>
      <aside>MENU</aside>
      <main>CONTENT</main>
      <footer>FOOTER</footer>
</div>

CSS:

.container {
   display: grid;
   grid-template-columns: 75px auto;
   grid-template-rows: 40px auto 40px;
}main {
   grid-column: 2/-1;
}footer {
   grid-column: 1/-1;
}header {
   display: flex;
   grid-column: 1/-1;
}header div:nth-child(3) {
   margin-left: auto;
}

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: