我正在尝试创建一个包含 2 个项目的基于 css 网格的布局，第一个项目将跨越宽度的 1/3，第二个项目将跨越宽度的 2/3，但是当宽度低于某个阈值时，第二个项目将跨越宽度跳到第二行，第一个项目应该填充第一行。
.grid {
display:grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 10px;
}
.span1 {
background-color:green;
}
.span2 {
background-color:red;
grid-column-end: span 2;
}
我这里有一个例子：https://codepen.io/anon/pen/qopvQz
一切正常，但我希望当第二个项目（红色）向下跳到第二行时，第一个项目（绿色）自动扩展到全宽度。截至目前，第一项仅占第一行的一半。这可以通过 CSS 网格（或 Flexbox）实现吗？
Flexbox 可以做到这一点，但它确实需要一些硬编码的最小宽度或
flex-shrink0.flex {
display: flex;
flex-wrap: wrap;
margin: 1em auto;
}
.flex.narrow {
width: 250px;
}
.span1 {
background-color: green;
flex: 1 0 100px;
/* min-width: 100px; */
}
.span2 {
background-color: red;
flex: 2 0 200px;
/* min-width: 200px; */
}<div class="flex">
<div class="span1">A</div>
<div class="span2">B</div>
</div>
<div class="flex narrow">
<div class="span1">A</div>
<div class="span2">B</div>
</div>您可以尝试容器查询
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.grid {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-template-rows: auto;
grid-auto-flow: dense;
gap: 20px;
padding: 20px;
container: test / inline-size;
}
.cell {
padding: 20px;
text-align: center;
grid-column: span 1;
background: red;
}
.w-2 {
grid-column: span 2;
background: blue;
}
.w-3 {
grid-column: span 3;
background: green;
}
/* 750px + 2 * gap */
@container test (inline-size < calc(790px)) {
.w-3 {
grid-column: span 2;
}
}
/* 500px + gap */
@container test (inline-size < 520px) {
.w-2 {
grid-column: span 1;
}
.w-3 {
grid-column: span 1;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="grid">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell w-2">4</div>
<div class="cell w-3">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
<div class="cell">9</div>
</div>
</body>
</html>