如何根据 window 大小使 CSS 网格更改布局？

Question

CSS 网格是否有像 material UI 网格必须根据布局大小更改的技巧？但我想用常规 CSS

我现在有这个

.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;
}

变成这个版面。当屏幕变小我希望它变成

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

Answer 1

使用媒体查询。正如 material ui 和所有其他 ui 库使用

您可以根据需要更改max-width

@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';
  }
}

如何根据 window 大小使 CSS 网格更改布局？

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

grid

reactjs