From the course: CSS: Advanced Layouts with Grid

Unlock the full course today

Join today to access over 22,700 courses taught by industry experts or purchase this course individually.

Make the grid responsive

Make the grid responsive - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

Make the grid responsive

“

- [Narrator] The last step in this process is to make sure everything looks good across all screen sizes. So as you can see here on a widescreen, everything looks fine. But if I start narrowing the screen, we get to certain point where the three flex boxes take up the full available width, but our two boxes down here are still stacked one next to the other. When I continue shrinking the width of the screen, it starts looking really strange. So I need to find the place where I want to toggle either just this particular section of the grid or the entire grid on and off. And in this case, because I'm only using the grid to create this foldly layout, I might as well just toggle the entire grid section on and off, depending on whether or not I need it down here. So I've decided that 600 pixel wide is probably the point where I want these two boxes to appear next to one another. That means I'll go into my code in style-main.css and inside @supports (grid-area: auto) I'll say @media screen…

Contents