如何在CSS Grid中实现高度自适应的元素排列

要实现你需要的CSS Grid布局，只需给容器和对应子元素添加以下CSS样式即可，全程不需要设置任何固定高度，所有元素高度随内容自动适配：

.container {
  /* 启用Grid布局 */
  display: grid;
  /* 定义两列宽度比例为7:3 */
  grid-template-columns: 7fr 3fr;
  /* 所有行高自动适配内容 */
  grid-auto-rows: auto;
  /* 可选：设置元素之间的间距，按需调整数值即可 */
  gap: 1rem;
}

.item1 {
  /* 占2行高度，对应右侧item2+item3的两行位置 */
  grid-row: span 2;
}

样式说明 #

• 用fr单位做列宽分配，会自动按比例瓜分容器可用宽度，比直接写70%/30%更灵活，也能自动适配gap带来的空间占用
• grid-row: span 2让item1自动占据2行的纵向空间，右侧的item2、item3会按照DOM顺序自动排布在第二列的第一、第二行位置
• 所有元素高度完全由内部内容决定，不需要设置任何固定高度值，哪怕item1高度比右侧两个元素总高度高/低，布局都不会错乱
• 该写法兼容所有现代浏览器，包括Chrome、Firefox、Safari 10.1+、Edge 16+，满足常规业务使用需求

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