我正在尝试使用CSS进行布局，其中有2列2行的网格。
第一列的宽度应为1fr，第二列的宽度应为4fr。
我尝试使用auto-fit：
HTML
<body>
<header>
<div class="item1">GRID ITEM 1</div>
<div class="item2">GRID ITEM 2</div>
<div class="item1">GRID ITEM 3</div>
<div class="item2">GRID ITEM 4</div>
</header>
</body>
CSS
header {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
div {
border: 1px solid;
}
在桌面屏幕模式下，仅使用(1fr, 3fr)和auto-fit时无法设置2种不同的列宽auto-fill。有没有不使用媒体查询就可以实现这一目标的方法？还是仅当列的宽度相同时才使用auto-fit和auto-fill？
所以，如果我理解正确。您的布局应具有5列（1 x 1fr，1 x 4fr）和2行。这是MIGHT回答您问题的内容。
.parent {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(2, 1fr);
height: 300px;
}
.item1 { grid-area: 1 / 1 / 2 / 2; background: red;}
.item2 { grid-area: 1 / 2 / 2 / 6; background: green; }
.item3 { grid-area: 2 / 1 / 3 / 2; background: yellow; }
.item4 { grid-area: 2 / 2 / 3 / 6; background: blue; }<div class="parent">
<div class="item1"> </div>
<div class="item2"> </div>
<div class="item3"> </div>
<div class="item4"> </div>
</div>