如何在单个CSS Grid容器中实现三种不同的页面布局

单个CSS Grid实现多比例布局方案 #

你需要的布局完全可以通过单个CSS Grid实现，你的实现思路是正确的，核心是利用2、3、5的最小公倍数30，把网格容器拆分为30等份，再给不同位置的子元素设置对应跨列宽度即可。

优化后的完整代码 #

首先给网格容器添加基础配置：

.grid-container {
  display: grid;
  grid-template-columns: repeat(30, 1fr);
  gap: 12px; /* 可按需调整单元格间距 */
}

子元素的样式可以简化写法，删除不必要的行位置声明，用grid-column简写跨列规则：

/* 第一行：2:1占比 */
:nth-child(1) {
  grid-column: 1 / 21;
}
:nth-child(2) {
  grid-column: 21 / 31;
}

/* 第二行：三等分 */
:nth-child(3) {
  grid-column: 1 / 11;
}
:nth-child(4) {
  grid-column: 11 / 21;
}
:nth-child(5) {
  grid-column: 21 / 31;
}

/* 第三行：五等分 */
:nth-child(6) {
  grid-column: 1 / 7;
}
:nth-child(7) {
  grid-column: 7 / 13;
}
:nth-child(8) {
  grid-column: 13 / 19;
}
:nth-child(9) {
  grid-column: 19 / 25;
}
:nth-child(10) {
  grid-column: 25 / 31;
}

说明 #

• grid-column的结束值是排他计数，所以跨20份需要写为1 / 21，避免宽度不足
• 用fr单位做等比分配，不需要手动计算百分比，适配性更强
• Grid布局默认会自动按行排布子元素，不需要手动指定grid-row属性
• 如果需要做响应式适配，只需要在对应断点下重写跨列规则即可

内容的提问来源于stack exchange，提问作者Никита Лямный