有没有办法制作一个 div 类，根据元素的数量改变其元素组织

Question

我有一个案例，我需要一个 css 类来显示 div 中的元素，并且组织应该根据内部元素的数量进行更改

这是我的案例 我有一个 DIV，应该有 3 个最少到 6 个元素最多

如果我有： 3 个元素：我应该显示 1 行 3 列 4 个元素：我应该显示 2 行和 2 列（1 列宽度与 3 列相同的宽度相同） 5 个元素：我应该显示 2 行，第一行有 3 列，第二行有 2 列 6 个元素：我应该显示 2 行 3 列

我放了一张展示通缉行为的照片

我不知道是否可以用 flex 或 grid 来完成，这可能吗？ 谢谢

我尝试使用 flex 和 grid 但无法实现，尤其是两列之间的过渡

Answer 1

您可以通过定义一个使用 CSS 网格布局的 CSS 类来实现这一点。网格布局允许您指定列数和行数，以及它们的宽度和高度，然后将您的元素放置在这些列和行中。

这是一个 CSS 类的示例，可用于实现您描述的布局：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
}

@media (max-width: 767px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
}

@media (max-width: 479px) {
  .container {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(6, 1fr);
  }
}

该类默认定义了一个3列2行的网格。它还在每个网格单元之间设置了 10 像素的间隙。

对于较小的屏幕，它调整网格为 2 列和 3 行用于 4 或 5 个元素，以及 1 列和 6 行用于 6 个元素。您可以调整断点