CSS 网格自动流重新排序项目

Question

我正在尝试创建一个自动流组件以根据屏幕尺寸重新排列内容。内容块总是成对出现：一个文本框和一个图像。

在桌面设备上，我希望布局是

| Text1 | Img1  |
| Img2  | Text2 |
| Text3 | Img3  |
| Img4  | Text4 |
... unlimited number of blocks

在手机上我总是想要图片前的文字

| Text1 |
| Img1  |
| Text2 |
| Img2  |
| Text3 |
| Img3  |
...

我一直在用网格容器

    .lrcontainer {
        display: grid;
        width: 100%;
        align-self: start;
        grid-auto-flow: row;
        align-items: center;
        justify-items: center;
    }

并使用媒体查询设置列数。我将各个文本和 img 块放入桌面视图的正确顺序，并尝试使用 css nth-child 和 order 属性为移动视图重新排序它们，但没有成功。

我开始想，这根本无法实现，我需要将文本 img 对放在一个额外的容器中。我是对的，还是有人有实现这种布局的妙招？

Answer 1

在

grid-auto-flow: dense;

容器上设置

grid

，使用

:nth-child

搜索单元格并在其上使用

grid-column

：

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: dense;
  /* optional */
  width: fit-content;
}

@media (min-width: 480px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }
  .cell:nth-child(4n-1) {
    grid-column: 2 / 3;
  }
  .cell:nth-child(4n-1) + .cell {
    grid-column: 1 / 2;
  }
}

<div class="grid">
  <div class="cell">Text1</div>
  <div class="cell">Img1</div>
  <div class="cell">Text2</div>
  <div class="cell">Img2</div>
  <div class="cell">Text3</div>
  <div class="cell">Img3</div>
  <div class="cell">Text4</div>
  <div class="cell">Img4</div>
  <div class="cell">Text5</div>
  <div class="cell">Img5</div>
  <div class="cell">Text6</div>
  <div class="cell">Img6</div>
</div>

Answer 2

@imhvost 答案的简化版本。我有一篇文章详细介绍了这种技术：https://css-tricks.com/exploring-css-grids-implicit-grid-and-auto-placement-powers/

.grid {
  display: grid;
  grid-auto-columns: 1fr; /*or auto if you want to fit the content */
  grid-auto-flow: dense;
}

@media (min-width: 480px) {
  .cell:nth-child(4n) {
    grid-column: 1;
  }
  .cell:nth-child(4n + 3){
    grid-column: 2;
  }
}

<div class="grid">
  <div class="cell">Text1</div>
  <div class="cell">Img1</div>
  <div class="cell">Text2</div>
  <div class="cell">Img2</div>
  <div class="cell">Text3</div>
  <div class="cell">Img3</div>
  <div class="cell">Text4</div>
  <div class="cell">Img4</div>
  <div class="cell">Text5</div>
  <div class="cell">Img5</div>
  <div class="cell">Text6</div>
  <div class="cell">Img6</div>
</div>