html - Css 网格 : horizontal two colums, 但垂直翻转

Question

<分区>

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>