面试题：CSS grid-template-columns与grid-template-rows高级难度面试题

Question

在一个响应式网页设计中，使用`grid-template-columns`和`grid-template-rows`实现如下需求：屏幕宽度大于1200px时，页面布局为4列3行，各列宽度比例为1:2:1:2，各行高度根据内容自适应；当屏幕宽度在768px到1200px之间时，变为3列4行，各列宽度比例为1:1:2，第一行高度为150px，其余行根据内容自适应；当屏幕宽度小于768px时，变为单列布局，所有元素垂直排列，每个元素高度为100px。请写出对应的CSS代码。

Answer 1

/* 屏幕宽度大于1200px */
@media (min-width: 1200px) {
  .container {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr 2fr;
        grid-template-rows: auto auto auto;
    }
}

/* 屏幕宽度在768px到1200px之间 */
@media (min-width: 768px) and (max-width: 1200px) {
  .container {
        display: grid;
        grid-template-columns: 1fr 1fr 2fr;
        grid-template-rows: 150px auto auto auto;
    }
}

/* 屏幕宽度小于768px */
@media (max-width: 768px) {
  .container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(auto-fill, 100px);
    }
}

假设页面中有一个类名为container的容器来包裹需要进行布局的元素。你可以根据实际的HTML结构调整CSS选择器。