如何让CSS Grid第二列占比最大且可收缩？

你之前写的代码里，设置grid-column: 2 / span 5会导致第二个元素占据第2到第6列（共5列），但容器总共只定义了6列，后面的四个元素没有剩余列可以放置，所以被迫换行。

这里提供两种可行的解决方案：

方案一：通过列比例分配实现 #

直接调整grid-template-columns的比例，让第二个元素占用更多空间，同时保证所有元素在同一行：

.container {
  border: solid black 3px;
  height: 100px;
  display: grid;
  /* 第一个列1份宽度，第二个列3份，其余四个列各1份 */
  grid-template-columns: 1fr 3fr 1fr 1fr 1fr 1fr;
}

.item {
  border: solid skyblue 1px;
}

方案二：精确控制列位置 #

如果需要更精细的列位置控制，可以先增加网格总列数，再指定每个元素的列范围：

.container {
  border: solid black 3px;
  height: 100px;
  display: grid;
  /* 定义8列基础网格 */
  grid-template-columns: repeat(8, 1fr);
}

.item {
  border: solid skyblue 1px;
}

.item:nth-of-type(2) {
  grid-column: 2 / span 3; /* 从第2列开始，连续占据3列 */
}
/* 指定剩余元素的列位置 */
.item:nth-of-type(3) { grid-column: 5; }
.item:nth-of-type(4) { grid-column: 6; }
.item:nth-of-type(5) { grid-column: 7; }
.item:nth-of-type(6) { grid-column: 8; }

方案一适合只需要让第二个元素更宽的简单场景，代码简洁；方案二则适合需要精准控制每个元素布局位置的情况。

内容的提问来源于stack exchange，提问作者Ry2254