I started learning CSS Grid at the end of last year. The more I learn about it, the more exciting it is. CSS Grid makes it very easy to achieve complicated layouts with very minimal CSS. I redid my blog page using CSS Grid a couple of weeks ago and it went much faster than I expected.

Last week, I was working on re-designing the admin page for the Chamber Dashboard business directory plugin and I wanted to do a responsive layout. I needed a sidebar and a right column which in turn needed to have two columns. So, I used nested grids for the layout and it was super simple to get it 100% responsive.

You can take a look at it on CodePen.

See the Pen Nested CSS Grid by Chandrika Guntur (@cguntur) on CodePen.

There is a #main_wrapper div which holds the sidebar and the right column. Here is the CSS for that div:

#main_wrapper{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr) );
  grid-gap: 3%;
}

Using the autofill and minmax makes the grid 100% responsive. Here is more information on this https://rachelandrew.co.uk/archives/2016/04/12/flexible-sized-grids-with-auto-fill-and-minmax/

In the right column, there are multiple divs which are also displayed in a grid. Here is the CSS for the right column:

.inner_wrapper{
  display:grid;
}

I needed the sidebar to take up 1/4th of the width and the right column to take up 3/4ths of the width when the screen width is above 700px. The divs in the right column should in turn be 2/3rds (left div) and 1/3rd (right div). Here is the code that does that.

@media screen and (min-width:700px){
  .inner_wrapper{
    grid-template-columns: 2fr 1fr;
  }

  #main_wrapper{
    grid-template-columns: 1fr 3fr;
  }
}

‘fr’ is the fractional unit. Learn more about the fractional unit here:

https://css-tricks.com/introduction-fr-css-unit/

https://alligator.io/css/css-grid-layout-fr-unit/

The div’s 1 & 2 are divided into two columns each, but the 3rd div should again be one column. So, I added a class one_col to the 3rd div. The CSS below makes sure that the 3rd column would stretch the entire width:

.inner_wrapper.one_col{
  grid-template-columns: 1fr;
}

Here is the screenshot of the actual page.

CSS responsive nested grid layout

Here is the plugin admin page screen cast showing the responsive grid in action.

If you would like to learn more about CSS Grid, here are some resources:

https://gridbyexample.com/

https://abookapart.com/products/get-ready-for-css-grid-layout

https://css-tricks.com/snippets/css/complete-guide-grid/

Leave a Reply

%d bloggers like this: