Responsive nested grid layout in WordPress admin page

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:

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

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:

[css]
.inner_wrapper{
display:grid;
}
[/css]

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.

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

#main_wrapper{
grid-template-columns: 1fr 3fr;
}
}
[/css]

‘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:

[css]
.inner_wrapper.one_col{
grid-template-columns: 1fr;
}
[/css]

Here is the screenshot of the actual page.