这种布局可以使用隐式 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>

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

Is this layout possible with implicit CSS grid?

css

css-grid