css - Set column width to content width in CSS Grid

Question

I hope every grid item should fit to its content width(400px), and keep the auto-fill. how can i do that?

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

无需设置高度它将自动为所有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>

    

Answer 3

这是我的解决方案。我刚刚更改了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>