Question

我希望每个网格项目都应适合其内容宽度（400像素），并保持自动填充。我该怎么办？

body {
  margin: 0px;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, auto));
  grid-gap: 10px;
  width: 100%;
}

<div class="container">
  <div style="background: aqua; height: 100px;">
    <div style="width: 400px; height: 100px;"></div>
  </div>
  <div style="background: aqua; height: 100px;">
    <div style="width: 400px; height: 100px;"></div>
  </div>
  <div style="background: aqua; height: 100px;">
    <div style="width: 400px; height: 100px;"></div>
  </div>
  <div style="background: aqua; height: 100px;">
    <div style="width: 400px; height: 100px;"></div>
  </div>
  <div style="background: aqua; height: 100px;">
    <div style="width: 400px; height: 100px;"></div>
  </div>
</div>

Answer 1

只需将minmax(240px, auto)替换为固定宽度400px。

请注意，当视口的宽度不是400的确切倍数时，这会产生间隙，但是仍会添加元素以填充尽可能多的空间。

body {
  margin: 0px;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, 400px);
  grid-gap: 10px;
  width: 100%;
}

<div class="container">
  <div style="background: aqua; height: 100px;">
    <div style="width: 400px; height: 100px;"></div>
  </div>
  <div style="background: aqua; height: 100px;">
    <div style="width: 400px; height: 100px;"></div>
  </div>
  <div style="background: aqua; height: 100px;">
    <div style="width: 400px; height: 100px;"></div>
  </div>
  <div style="background: aqua; height: 100px;">
    <div style="width: 400px; height: 100px;"></div>
  </div>
  <div style="background: aqua; height: 100px;">
    <div style="width: 400px; height: 100px;"></div>
  </div>
</div>

Answer 2

这是我的解决方案。我刚刚更改了grid-template-columns: 400px 400px;属性，并将其固定为400px。

body {
  margin: 0px;
}

.container {
  display: grid;
  grid-template-columns: 400px 400px;
  grid-gap: 10px;
  width: 100%;
}

<div class="container">
  <div style="background: aqua; height: 100px;">
    <div style="width: 400px; height: 100px;"></div>
  </div>
  <div style="background: aqua; height: 100px;">
    <div style="width: 400px; height: 100px;"></div>
  </div>
  <div style="background: aqua; height: 100px;">
    <div style="width: 400px; height: 100px;"></div>
  </div>
  <div style="background: aqua; height: 100px;">
    <div style="width: 400px; height: 100px;"></div>
  </div>
  <div style="background: aqua; height: 100px;">
    <div style="width: 400px; height: 100px;"></div>
  </div>
</div>

Answer 3

无需设置高度将自动为所有div设置

.grid--article {
        padding-bottom: 10px;
        display: grid;
        grid-template-columns: 33.33% 33.33% 33.33%;
        grid-gap: 0.5rem;
    }
    .grid--wrapper {
        display: inline-block;
        padding: 10px;
        border-radius: 5px;
        margin-bottom: 15px;
    }

    <div class="grid--article">
        <a class="grid--wrapper">your Text Goes here</a>
        <a class="grid--wrapper">your Text Goes here</a>
        <a class="grid--wrapper">your Text Goes here</a>
        <a class="grid--wrapper">your Text Goes here</a>
    </div>

将列宽设置为CSS网格中的内容宽度

3 个答案: