css - 如何获得CSS Grid列宽以匹配内容？

Question

我的问题：我不知道如何获取CSS网格轨道宽度以自动调整图像大小。

这是my CodePen，显示了我在下面描述的问题：

我有几个使用相同CSS类的<div>元素，该类定义了CSS网格。

每个<div>元素代表一行，其中可以包含不同数量的图像。每行的图像宽度相同，不会有混合图像宽度的行。

一行可能包含两张178px宽的图像。

另一行可能包含五张133px宽的图像。

我希望所有列之间的间隙都10px宽。但是，正如我的Codepen中所见，每行中的所有列最终都以178px宽结尾。带有133px图像的网格轨迹最终以178px宽，形成巨大的间隙。

可以使用一个CSS网格类完成此操作吗？还是我需要为不同宽度的图像定义不同的CSS网格类？

Answer 1

您将需要为不同的宽度图像定义不同的CSS网格类。

.items-grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(133px, 178px));
  margin-bottom: 3rem;
}

.items-grid2 {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(128px, 133px));
  margin-bottom: 3rem;
}

<div class="items-grid">
  <img src="http://via.placeholder.com/178x100">
  <img src="http://via.placeholder.com/178x100">
</div>

<div class="items-grid2">
  <img src="http://via.placeholder.com/133x100">
  <img src="http://via.placeholder.com/133x100">
  <img src="http://via.placeholder.com/133x100">
  <img src="http://via.placeholder.com/133x100">
  <img src="http://via.placeholder.com/133x100">
</div>