如何让Grid子项跨所有行且不影响其他Grid子项布局？

需求说明 #

要实现一个动态Grid布局：

• 所有新元素默认放入第一列的新行，高度随内容自适应
• 最后一个元素切换到第二列，并占满该列的全部高度
• 元素数量动态变化，不能使用固定值或针对固定位置的选择器

期望布局效果 #

第一列包含多个高度自适应的元素（每个元素高度由自身内容决定），第二列仅有一个元素，从容器顶部延伸到底部，且不会导致第一列元素被强制拉平高度。

解决方案 #

核心是通过调整Grid容器的对齐属性，避免第一列元素被强制拉伸，同时让最后一个元素自动占据第二列全部高度。

修改后的代码 #

CSS #

ul {
  margin: 0;
  list-style-type: none;
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 20px;
  max-width: 600px;
  align-items: start; /* 关键：阻止元素被拉伸到行高 */
}

li {
  grid-column: 1;
  border: 1px solid black;
}

li:last-child { /* 适配动态元素数量，自动选中最后一个元素 */
  grid-column: 2;
  grid-row: 1 / -1; /* 占满第二列的全部高度 */
}

img {
  max-width: 100%;
}

HTML #

<ul>
  <li>here's some content</li>
  <li>here's some content<br>多一行内容测试高度自适应</li>
  <li>here's some content</li>
  <li>here's some content<br><br>更多内容</li>
  <li><img src="https://images.unsplash.com/photo-1481349518771-20055b2a7b24?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8cmFuZG9tfGVufDB8fDB8fA%3D%3D&w=1000&q=80"></li>
</ul>

原理说明 #

• align-items: start：Grid容器默认的align-items: stretch会让单元格内的元素拉伸至行高，添加该属性后，第一列元素会保持自身内容高度，不会被第二列的高元素强制拉平。
• li:last-child：替代固定类名，无论元素数量多少，最后一个元素都会自动应用第二列布局规则，完美适配动态场景。
• grid-row: 1 / -1：让最后一个元素从第一行延伸到最后一行，占满第二列的全部高度，满足布局需求。

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