隐式CSS网格是否可以使用这种布局？

Question

我正在使用隐式CSS网格： 网格 - 板块列：1FR 1FR;

是否可以使其看起来像曲折的布局？喜欢：

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

我在这里制作了一支笔： https://codepen.io/stdusan/pen/pen/pen/pen/pen/pen >

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>