如何在窗口大小上使CSS网格更改布局？

Question

CSS网格是否具有像材料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

使用媒体查询。就像材料UI和其他所有UI库的使用一样，

您也可以根据自己的愿意更改最大宽度

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