CSS网格：水平两个列，但垂直翻转[重复]

Question

这个问题已经在这里有了答案：

• 根据设备宽度更改CSS的div顺序 1回答
• 如何颠倒媒体查询中元素的顺序？ 4个答案
• 如何仅使用CSS重新排序div？ 23个答案
• CSS Grid Layout中列的反向顺序 3答案

我用

gridTemplateColumns: `repeat(auto-fill, minmax(250px, 1fr))`,

得到两列，如果它们的宽度小于250px，我得到布局：

[1] [2]

如果宽度小于250，则得到布局：

[1]
[2]

我想知道是否可以翻转垂直布局：

[2]
[1]

首先要保持水平[1] [2] 。

Answer 1

对于只有两个网格项目的特定情况，您可以通过在网格容器中镜像垂直方向并反转网格项目中的镜像效果来对其进行破解 -请参见下面的演示：

 .wrapper { display: grid; grid-auto-rows: 100px; /* set a row height for illustration */ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); transform: scaleY(-1); /* mirror vertically */ } .wrapper > div { background: aliceblue; border: 1px solid cadetblue; display: flex; align-items: center; justify-content: center; transform: scaleY(-1); /* straighten the grid item */ } 

 <div class="wrapper"> <div>1</div> <div>2</div> </div>