css - 如何使我的网格折叠，最后一个项目在顶部，第一个项目在底部？

Question

我有一个使用这个技巧将列折叠成行的网格

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

我希望它以某种方式折叠到第一项到达底部的位置。有没有办法做到这一点？

标签： css

Answer 1

您可以使用媒体查询，例如：

  @media (max-width: 200px) {
    .box-2 {
      order: -1
    }
  }

这表示当父容器低于 200px 时，box-2 的类被向后发送