CSS 如何改变网格布局偶数行的排序？

最近在项目中看到这样一个布局，如下WoC28资讯网——每日最新资讯28at.com

图片WoC28资讯网——每日最新资讯28at.com

布局本身没什么奇怪的，就是 「4 * 2」 的网格，比较特殊的是第二行布局是从右往左的，整体是一个这样的顺序WoC28资讯网——每日最新资讯28at.com

图片WoC28资讯网——每日最新资讯28at.com

而这个列表是通过一个数组动态渲染的，可能有很多同学会将这个数组分成两份，然后将第二份进行反向，类似于这样WoC28资讯网——每日最新资讯28at.com

let arr1 = list.slice(0, 4)let arr2 = list.slice(4, 8).reverse()

然后，由于第二行的第一个其实是原数组的第八个，还需要针对第二行做额外的处理，比如序列WoC28资讯网——每日最新资讯28at.com

// 第一行第 {{ i }} 个// 第二行第 {{ 8 - i }} 个

而且，如果有点击事件，传值也需要额外处理，虽然也能实现，但显然是太麻烦，而且还容易出 bug。WoC28资讯网——每日最新资讯28at.com

WoC28资讯网——每日最新资讯28at.com

那么，有没有其他更简单、更稳定的方式来解决呢？也就是如何让第二行子项反向呢？WoC28资讯网——每日最新资讯28at.com

一、flex 布局实现

由于这里是动态渲染，所以最理想的结构应该是这样的，直接一层循环搞定WoC28资讯网——每日最新资讯28at.com

<class="list">  <class="item">1</div>  <class="item">2</div>  <class="item">3</div>  <class="item">4</div>  <class="item">5</div>  <class="item">6</div>  <class="item">7</div>  <class="item">8</div></div>

通过 flex 或者 grid都很容易实现4 * 2的布局，先用 flex实现WoC28资讯网——每日最新资讯28at.com

.list{  display: flex;  width: 600px;  gap: 20px;  flex-wrap: wrap;}.item{  width: calc( (100% - 60px) / 4 );  aspect-ratio: 1/1;  background: royalblue;  color: #fff;  font-size: 30px;  border-radius: 10px;  display: flex;  align-items: center;  justify-content: center;}

可以得到这样的布局WoC28资讯网——每日最新资讯28at.com

图片WoC28资讯网——每日最新资讯28at.com

有什么办法在不改变 html 的情况下改变第二行的位置呢？

本文链接：http://www.28at.com/showinfo-26-5698-0.htmlCSS 如何改变网格布局偶数行的排序？

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： Feign如何设置超时时间，不同情况下还真不一样

下一篇： 到底该不该使用Python?