Question

我用

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

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

[1] [2]

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

[1]
[2]

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

[2]
[1]

同时先按照[1] [2]所述保持水平。

Answer 1

对于这种只有两个 grid项的特殊情况，您可以通过镜像 grid容器中的垂直方向来 hack 反转网格项中的镜像效果-请参见下面的演示

.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>

CSS网格：水平两个列，但垂直翻转

1 个答案: