CSS Grid能否实现行列灵活可变的iTunes封面式自适应布局？

当然可以用纯CSS Grid实现这种效果！你之前的思路方向是对的，只需要调整一下Grid的列定义方式，再加上正方形的设置就可以搞定。

核心思路是利用repeat(auto-fit, minmax())这个组合，它能让Grid自动根据可用空间调整列数，同时控制每个tile的最小/最大宽度，再用aspect-ratio属性轻松实现正方形tile。

下面是修改后的完整代码：

<section>
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
 <div>6</div>
 <div>7</div>
 <div>8</div>
 <div>9</div>
 <div>10</div>
</section>

section {
  display: grid;
  /* 关键：auto-fit自动适配列数，minmax控制tile的最小/最大宽度 */
  grid-template-columns: repeat(auto-fit, minmax(45px, 50px));
  gap: 10px; /* 替代grid-gap，现在更推荐这个标准写法 */
  padding: 10px; /* 给容器加内边距，避免边缘tile贴屏幕 */
  justify-content: center; /* 可选：让tile在容器中居中排列，优化视觉效果 */
}

div {
  background: gray;
  aspect-ratio: 1; /* 直接设置宽高比1:1，轻松实现正方形 */
  display: flex; /* 可选：让数字居中显示，提升可读性 */
  align-items: center;
  justify-content: center;
}

关键细节解释： #

1. repeat(auto-fit, minmax(45px, 50px))：

   • auto-fit会自动计算当前容器宽度下能容纳多少列，空间足够时，每个tile会使用最大宽度50px；
   • 当容器宽度缩小，每个tile会先收缩到最小宽度45px；
   • 如果继续缩小容器，无法容纳当前列数的45px tile时，Grid会自动减少列数，剩下的tile会再次扩展到50px，完美匹配你想要的逻辑。

2. aspect-ratio: 1：

   • 这个属性可以直接让元素保持宽高比1:1，不需要手动设置高度，比用padding-top的老方法更简洁，目前主流浏览器都已支持。

3. 可选的优化项：

   • 给section加justify-content: center可以让列数减少时，tile在容器中居中，视觉效果更舒服；
   • 给div加flex布局是为了让里面的数字居中，不需要的话可以直接去掉。

这样就完全用纯CSS实现了你想要的布局，不需要任何JavaScript，响应式行为和iTunes封面的逻辑完全一致~

内容的提问来源于stack exchange，提问作者st-h