如何为CSS Grid容器第五行的特定网格区域自定义百分比宽度？

问题背景 #

正在将网站从CSS表格布局转为CSS Grid布局，布局包含12个网格区域、7行、4列，默认4列各占25%符合需求，但第五行需要main占60%、aside占40%，直接给这两个元素设置width属性后未生效，显示宽度远小于预期。

当前代码：

CSS代码

body, html {margin:0;padding:0;border:0;outline:0;
box-sizing:border-box;text-align:center;
width:100%;height:100%}
body {font-size:16px;font-weight:400;color:#121212}

.container {display:grid; 
grid-template-rows:auto auto auto auto auto auto auto;
grid-template-columns:25% 25% 25% 25%;
grid-template-areas: 
    'language language date date'
    'logo logo logo logo'
    'mobile mobile mobile mobile'
    'nav nav nav nav'
    'main main main aside' 
    'alerts weather categories about'
    'footer footer footer footer';
gap:0px;height:100%;}
  
#language {background-color:#a7e779;grid-area:language;}
#date {background-color:#badb68;grid-area:date;}
#logo {background-color:#8fbccb;grid-area:logo;}
#mobile {background-color:#dae799;grid-area:mobile;}
#nav {background-color:#b7b78e;grid-area:nav;}

#main {background-color:#dfe575;grid-area:main;width:60%}
#aside {background-color:red;grid-area:aside;width:40%}

#alerts {background-color:#baedcd;grid-area:alerts;}
#weather {background-color:#cb7ba7;grid-area:weather;}
#categories {background-color:#6998e5;grid-area:categories;}
#about {background-color:#cc79de;grid-area:about;}
#footer {background-color:#7d88d9;grid-area:footer;}

HTML代码

<div class="container">
  <div id="language">language</div>
  <div id="date">date</div>
  <div id="logo">logo</div>
  <div id="mobile">mobile</div>
  <div id="nav">nav</div>
  <div id="main">main must be 60%</div>
  <div id="aside">aside must be 40%</div>
  <div id="alerts">alerts</div>
  <div id="weather">weather</div>
  <div id="categories">categories</div>
  <div id="about">about</div>
  <div id="footer">footer</div>
</div>

原因分析 #

CSS Grid布局中，网格项的宽度受全局网格列轨道约束，直接给网格项设置width只会让元素在分配到的轨道内缩放，无法改变轨道本身的宽度。当前第五行main分配了3个25%的列（总75%），aside分配了1个25%的列，所以设置width:60%和40%后，元素只会在各自轨道里缩小，达不到预期。

解决办法 #

方案一：子容器嵌套Flex布局（推荐，保留原有Grid结构）

通过嵌套Flex容器，在第五行的Grid轨道内实现自定义宽度分配：

1. 修改Grid模板与HTML结构
   • 将grid-template-areas中的第五行改为'main-container main-container main-container main-container'，让新容器占据整行
   • 在HTML中添加#main-container，将#main和#aside包裹进去
2. 添加子容器的Flex样式
   • 给#main-container设置Flex布局，让内部元素按比例分配宽度
   • 用flex属性替代原有的width，固定比例

修改后的完整代码：

CSS代码

body, html {margin:0;padding:0;border:0;outline:0;
box-sizing:border-box;text-align:center;
width:100%;height:100%}
body {font-size:16px;font-weight:400;color:#121212}

.container {display:grid; 
grid-template-rows:auto auto auto auto auto auto auto;
grid-template-columns:25% 25% 25% 25%;
grid-template-areas: 
    'language language date date'
    'logo logo logo logo'
    'mobile mobile mobile mobile'
    'nav nav nav nav'
    'main-container main-container main-container main-container' 
    'alerts weather categories about'
    'footer footer footer footer';
gap:0px;height:100%;}
  
#language {background-color:#a7e779;grid-area:language;}
#date {background-color:#badb68;grid-area:date;}
#logo {background-color:#8fbccb;grid-area:logo;}
#mobile {background-color:#dae799;grid-area:mobile;}
#nav {background-color:#b7b78e;grid-area:nav;}

#main-container {
  grid-area:main-container;
  display:flex;
  width:100%;
}
#main {background-color:#dfe575;flex:0 0 60%;}
#aside {background-color:red;flex:0 0 40%;}

#alerts {background-color:#baedcd;grid-area:alerts;}
#weather {background-color:#cb7ba7;grid-area:weather;}
#categories {background-color:#6998e5;grid-area:categories;}
#about {background-color:#cc79de;grid-area:about;}
#footer {background-color:#7d88d9;grid-area:footer;}

HTML代码

<div class="container">
  <div id="language">language</div>
  <div id="date">date</div>
  <div id="logo">logo</div>
  <div id="mobile">mobile</div>
  <div id="nav">nav</div>
  <div id="main-container">
    <div id="main">main must be 60%</div>
    <div id="aside">aside must be 40%</div>
  </div>
  <div id="alerts">alerts</div>
  <div id="weather">weather</div>
  <div id="categories">categories</div>
  <div id="about">about</div>
  <div id="footer">footer</div>
</div>

方案二：调整Grid列轨道（重构Grid结构）

重新定义Grid列模板为6:4的比例，通过grid-column控制其他行元素的跨列行为：

.container {
  display:grid; 
  grid-template-rows:auto auto auto auto auto auto auto;
  /* 定义两列，比例6:4 */
  grid-template-columns:6fr 4fr;
  grid-template-areas: 
      'language date'
      'logo logo'
      'mobile mobile'
      'nav nav'
      'main aside' 
      'alerts weather'
      'categories about'
      'footer footer';
  gap:0px;height:100%;
}
/* 让原本占4列的元素各占1列，对应原25%宽度 */
#alerts, #weather, #categories, #about {
  grid-column: span 1;
}

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