这个布局是可能的隐式CSS网格?

Question

我使用隐式CSS网格:grid-template-columns: 1fr 1fr;

有可能使它看起来像一个之字形布局吗?如:

<image> <text>
<text> <image>
<image> <text>
<text> <image>
<image> <text>
<text> <image>
<image> <text>
<text> <image>
...

我在这里画了一支笔:https://codepen.io/stdusan/pen/yLvPKNb

body {
padding: 50px;
}
div {
padding: 20px;
}
.image {
background: red;
padding: 20px;
}
.text {
background: #ddd;
padding: 20px;
}
.grid {
display: grid;
gap: 20px;
grid-template-columns: 1fr 1fr;
}

<div class="grid">
<div class="image"><img src="https://picsum.photos/200/200" alt=""></div>
<div class="text">Some text</div>
<div class="image"><img src="https://picsum.photos/200/200" alt=""></div>
<div class="text">Some text</div>
<div class="image"><img src="https://picsum.photos/200/200" alt=""></div>
<div class="text">Some text</div>
<div class="image"><img src="https://picsum.photos/200/200" alt=""></div>
<div class="text">Some text</div>
<div class="image"><img src="https://picsum.photos/200/200" alt=""></div>
<div class="text">Some text</div>
<div class="image"><img src="https://picsum.photos/200/200" alt=""></div>
<div class="text">Some text</div>
<div class="image"><img src="https://picsum.photos/200/200" alt=""></div>
<div class="text">Some text</div>
<div class="image"><img src="https://picsum.photos/200/200" alt=""></div>
<div class="text">Some text</div>
</div>

Answer 1

是

.image {
background: red;
padding: 20px;
}
.text {
background: #ddd;
padding: 20px;
}
.grid {
display: grid;
gap: 20px;
grid-template-columns: 1fr 1fr;
grid-auto-flow: dense; /* this */
}
.image:nth-child(4n + 3) {
grid-column: 2; /* and this */
}

<div class="grid">
<div class="image"><img src="https://picsum.photos/200/200" alt=""></div>
<div class="text">Some text</div>
<div class="image"><img src="https://picsum.photos/200/200" alt=""></div>
<div class="text">Some text</div>
<div class="image"><img src="https://picsum.photos/200/200" alt=""></div>
<div class="text">Some text</div>
<div class="image"><img src="https://picsum.photos/200/200" alt=""></div>
<div class="text">Some text</div>
<div class="image"><img src="https://picsum.photos/200/200" alt=""></div>
<div class="text">Some text</div>
<div class="image"><img src="https://picsum.photos/200/200" alt=""></div>
<div class="text">Some text</div>
<div class="image"><img src="https://picsum.photos/200/200" alt=""></div>
<div class="text">Some text</div>
<div class="image"><img src="https://picsum.photos/200/200" alt=""></div>
<div class="text">Some text</div>
</div>