How do I make CSS grid change layout upon window size?

May 30, 2022

Does the CSS grid have a trick like the material UI grid has to change based on layout size? but I wanna do it with regular CSS

I have this right now

.grid {
  height: 100vh;
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 2fr 8fr 2fr;
  grid-template-areas: 
    'header header'
    'sidebar body'
    'footer footer';

}


.header {
  grid-area: header;
  background-color: blue;
}

.sidebar {
  grid-area: sidebar;
  background-color: green;

}

.body {
  grid-area: body;
  background-color: red;
}

.footer {
  grid-area: footer;
  background-color: purple;
}

enter image description here

It becomes this layout. When the screen is smaller I want it to become

header (2/14)
sidebar (2/14)
body (8/14)
footer (2/14)

>Solution :

use media querys. Just as material ui and every other ui libraries use

You can optimize the max-width as you prefer

@media only screen and (max-width: 600px) {
  .grid {
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 2fr 8fr 2fr;
    grid-template-areas: 
      'header'
      'sidebar'
      'body'
      'footer';
  }
}