内容动态时更改CSS网格单元的顺序

问题描述

grid-container { 
    font-family: sans-serif;
      display: grid;
    grid-gap: 10px;
    column-count: 1;
}


/* header projects */

grid-item:nth-child(3n + 1) {
    font-weight: bold;  
    background-color: lightblue;
    grid-row-start: 2;
}

/* images*/
grid-item:nth-child(3n + 2)  {
  background-color: lightpink;
  grid-row-start: 1;
}


/* texts*/
grid-item:nth-child(3n + 3)  {
  background-color: yellow;
  grid-row-start: 3;
}

<grid-container>
  <grid-item>header1</grid-item>
  <grid-item>image1</grid-item>
  <grid-item>text1</grid-item>
  <grid-item>header2</grid-item>
  <grid-item>image2</grid-item>
  <grid-item>text2</grid-item>
  <grid-item>header3</grid-item>
  <grid-item>image3</grid-item>
  <grid-item>text3</grid-item>
  <grid-item>header4</grid-item>
  <grid-item>image4</grid-item>
  <grid-item>text4</grid-item>
</grid-container>

我正在与wordpress合作，并且尝试在我的帖子存档页面上应用网格。在我的html（由php生成）中，我有一个容器，该容器按以下顺序排列：

 container
       |__header
       |__image
       |__text

每当有新帖子发表时重复这些操作。

在我的全屏视图中，我使内容按网格排列为

 _____   _______
|image| |header |
|     | |_______|
|     | |text   |
|_____| |_______|

现在，我正在研究设计的响应版本。我想要以下

 ______
|image |
|______|
|header|
|______|
|text  |
|______|

由于我必须更改内容的顺序，所以这很棘手。

我尝试使用

grid-template-columns: none;

grid-template-columns: 1fr; 

grig-auto-columns: 1fr; 

等

我尝试定义将grid-row-start: 1;添加到目标项目中，但是没有用。结合grid-row-start: 1;可使所有内容一次位于相应的单元格上。

我已经尝试过grid-template-columns和grid-auto-columns

我现在拥有的是垂直顺序的图像标题文本，但水平重复。

使用网格是否有可能实现这一目标？或者使用其他方法会更好吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）