如何让 CSS Grid 列宽与内容相匹配？

Question

我的问题：我不知道如何让 CSS 网格轨道宽度自动调整到图像内容。

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

我有几个<div>元素使用相同的 CSS 类来定义 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>