html - 即使最后一个有可用空间，如何在响应式块项目中制作相同的宽度

Question

我想让列表中的项目都具有相同的大小和响应性。我调节 min-width、max-width 和 flex-grow: 1 如果它们有可用空间。但是最后一项，如果你看到我的代码笔，如果它们有可用空间，它们的尺寸都会比其他的大，我不想要这种行为。如何在没有媒体查询的情况下解决这个问题，因为容器的大小将是动态未定义的，并且项目的数量也是未定义的。

.item {
  min-width: 150px;
  max-width: 250px;
  flex-grow: 1;
}

https://codepen.io/magistr19/pen/MWgPxBW?editors=1100

UPD：需要良好的浏览器支持（不适合 CSS 网格）

标签： htmlcss

Answer 1

即使最后一个有可用空间，如何在响应式块项目中制作相同的宽度

CSS-Grid 是解决您问题的好方法

结果

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-auto-rows: 200px;
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
  background: #008000;
}

.item {
  background: #FF0000;
}

<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 class="item"></div>
  <div class="item"></div>
</div>