小编Bra*_*y88的帖子

CSS Grid 响应式布局保持完整的行

我有一个用于我正在构建的仪表板的网格布局。我正在努力实现以下目标：

保持网格元素的纵横比
确保每个网格行都已填充/完成。这就是我的问题孩子。我在这里看到了多个教程和答案，其中随着宽度的减小，行中可能包含新行中的剩余元素。这会在孤立网格元素/不完整行右侧的网格中创建大量空白空间。我希望网格移动以将列减少到下一个最低的可整除数，从而得到完整的行。如果网格以不可整除的数字（素数）开头，则它只能转到单个列进行折叠，比如说 3 个网格项目折叠为 1，因为它是最高除数，因此保持完整的行。另一个示例，6 个项目会折叠为 3 列 2 列，然后是 2 列 3 列，然后是 1 列 6。

我很好奇是否有纯 CSS 方法来确保行保持完整，或者这是否需要 javascript。任何一个答案都足够了，但我更喜欢纯 css 解决方案。

到目前为止我的代码：

.grid-4-2-1 {
  display: grid;
  grid-template-areas: "grid-child-1 grid-child-2 grid-child-3 grid-child-4";
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 20px;
  margin: 20px;
}

.grid-child {
  position: relative;
  align-items: center;
  justify-content: space-between;
  padding-top: 100%;
  background-color: #fff;
  position: relative;
}

.grid-child .grid-content {
  position: absolute;
  right: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
}


@media only screen and (min-device-width: 768px) and (max-device-width: …

Run Code Online (Sandbox Code Playgroud)

html javascript css css-grid

Bra*_*y88

2021 05-19

10
推荐指数

1
解决办法

242
查看次数