在屏幕调整大小时将布局从行更改为网格

Question

我有一个非常具体的用户体验请求。我在一个容器中有四个链接，一个在一行中彼此相邻，由一条垂直线分隔。

示例：

链接一 |链接二 |链接三 |链接四

如果它们都适合容器，这就是布局。一旦用户减小屏幕尺寸并且链接不再适合，我想将布局切换为 2 行和 2 列。并在行之间有一个水平分隔线。 此外，链接的存在是可变的。如果只有三个链接，则第三个链接将延伸到整个底行。

示例：

链接一 |链接二

---

链接三 |链接四

或者

链接一 |链接二

---

链接三

如果可能的话，我想在不使用 JS 的情况下实现这种行为。理想情况下使用 Flexbox 或 Bootstrap。 有可能吗？

Answer 1

您可以尝试使用网格和媒体查询：

.container {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   text-align: center;
   margin: 1em;
}
a {
  border-right: 1px solid grey;
}
a:last-child {
   border-right: none;
}
@media screen and (max-width: 500px) {
 .container {
    grid-template-columns: repeat(2, 1fr);
  }
  .container a:nth-child(1), a:nth-child(2) {
    border-bottom: 1px solid grey;
  }
  a:nth-child(2) {
    border-right: none;
  }
  a:nth-child(3):last-child {
    grid-column: 1/3;
  }
}

<div class="container">
  <a>Link 1</a>
  <a>Link 2</a>
  <a>Link 3</a>
  <a>Link 4</a>
</div>

<div class="container">
  <a>Link 1</a>
  <a>Link 2</a>
  <a>Link 3</a>
</div>