代码之家 › 专栏 › 技术社区 › Bram Vanbilsen

动态网格:当屏幕大小增加时添加更多列

css

Bram Vanbilsen · 技术社区 · 7 年前

我正在尝试创建一个网格,其中的列动态地适应屏幕大小。最重要的条件是,我只希望在移动设备上或pc上的浏览器上有一列相似的尺寸,当浏览器窗口的宽度增加时,可以添加更多的列。

.App {
  margin: 10px;
  text-align: center;
  display: grid;
  grid-gap: 10px;
  justify-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(?, ?)); /* Should change */
}

网格中的所有内容都具有相同的宽度,看起来像是以下略图所示: 对于网格子元素的特定宽度,我考虑的是 minmax 函数来决定是否只填充整个视区宽度,但我在那里碰到了一块石头。因为如果我用 minmax(25vw, 100vw) 那么我总是有一个宽度 100vw 因为没有什么能阻止它不全宽。

我不是一个css的家伙,没有太多的经验,所以如果我说了一些完全愚蠢的话,不要犹豫指出它!

1 回复 | 直到 7 年前

luke-codewalker 7 年前

如果我理解正确,那么 media queries 应该是解决你问题的办法。它们允许您指定 仅适用于特定屏幕大小的规则 (或其他条件)。

720px 如果它们更大,只要尽可能多的列在网格中就行了(如果我错了,请纠正我!)。

然后我们可以用它来制作所有的小屏幕:

@media (max-width: 720px) {
  .grid {
      grid-template-columns: repeat(auto-fill, 720px);
  }
}

使用 grid-template-columns: repeat(auto-fill, 200px); 200px 是项目的宽度,例如对于所有其他情况。

示例如下:

body {
  margin: 0;
}

.grid {
  width: 100%;
  margin: 1rem auto;
  display: grid;
  justify-items: center;
  grid-gap: 10px;
  justify-content: center;
  grid-template-columns: repeat(auto-fill, 200px);
}

.item {
  width: 200px;
  height: 200px;
  border: 1px solid #333;
  background-color: #aaa;
}

@media (max-width: 720px) {
  .grid {
      grid-template-columns: repeat(auto-fill, 720px);
  }
}

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

注: 使用“整页”查看它与更大的 width