CSS 12列网格布局嵌套元素无法正常显示问题求助

问题描述 #

• 学习CSS Grid布局时遇到异常：将标签放入<div>、<article>等容器后，子元素无法在12列网格中正确对应行列位置，但直接放在网格容器（body）中时显示正常
• 尝试给父元素设置display: grid但无效，调试工具发现元素继承了用户代理样式表的display: block属性，该问题在Chrome和Firefox中均存在

原代码 #

CSS

/* custom property */
:root {
    --global-color-1: #21aab4;
    background-color: white;
}
* {
    margin: 0;
    padding: 0;
}

/* the styles for the elements */
body {
    font-family: Arial, Helvetica, sans-serif;
  font-size: 100%;
    
    border: 3px solid black;

    margin: 0;
    display: grid;
    grid-template-rows: 150px auto auto 150px;
    grid-template-columns: repeat(12, 8.3vw);
    
}
img {
    max-width: 100%;
    overflow: hidden;
}

#logo{
    display: grid;
    grid-row: 1 /2; grid-column: 1 / 5;
    max-width: 100%;    
}
#name{
    max-width: 100%;
    padding-top: 2rem;
    grid-row: 1 /2; grid-column: 1 / 5;
}
#header {
    grid-row: 1 / 2; grid-column: 1 / 13;
    background-color: white;
  border-bottom: 2px solid black;
}
#nav {  
  display: flex;
  justify-content: space-between;

  list-style-type: none;
  grid-column: 5 / 12;
  padding-top: 2.5rem;
    border-bottom: 2px solid black;

}
main {
    grid-row: 2 / 4; grid-column: 1 / 13;
    display: grid;
}



#thoughtful {
  display: flex;
    grid-row: 2 / 4;
    grid-column: 1 /  5;
}
#s2 {
    grid-row: 2 / 4; grid-column: 7 / 13;
    width: 40vw;
}
#s2 h1{
    font-size: 3.2vw;
}
#s2 li{
    font-size: 2vw;
}
footer {
    grid-row: 4 / 5; grid-column: 1 / 12;
    text-align: center;
    padding-top: 5vh;
    font-family: serif;
}
a:focus, a:hover {
    font-style: italic;
}

.current {
    color:  rgb(20, 111, 4);
}

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Sage Raymond </title>
    <link rel="shortcut icon" href="images/Bear-favicon.jpg">
    <link rel="stylesheet" href="styles/main_gridexp.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
        <div id="logo"><a href="index.html"><img src="images/name.gif" alt="Sage Raymond Homepage" id="name"></a></div>
        <ul id="nav">
      <li> </li>
      <li class="current"><a href="index.html"><h2>Home</h2></a></li>

      <li><a href="education.html"><h2 class="current">C.V.</h2></a></li>
      <li><a href="publications.html"><h2>Papers</h2></a></li>
      <li><a href="media.html"><h2>Media</h2></a></li>
    </ul>

    <img src="images/thoughtful_sage.jpeg" id="thoughtful">
    <ul id="s2">
      <h1>Degrees</h1>
      <li>Master of Science in Ecology, University of Alberta, January 2021 to present</li>
      <li>Bachelor of Science in Biology, Thompson Rivers University, December 2020</li>
      <li>Diploma in Recreation, Fish, and Wildlife, Selkirk College, April 2017</li>   
    </ul>

    <footer>
      <p>&copy; 2022, Sage Raymond, Port Townsend, WA, USA 98368</p>
    </footer>
</body>
</html>

核心原因 #

1. Grid作用范围限制：CSS Grid的行列定位属性（grid-row、grid-column）仅对网格容器的直接子元素生效。嵌套在<div>等容器内的元素属于容器的子元素，而非上层网格容器（如body）的直接子元素，因此无法直接使用上层网格的定位规则。
2. 布局属性冲突：部分元素同时设置了display: flex和Grid定位属性（如#nav、#thoughtful），导致Grid属性被覆盖失效——一个元素不能同时作为Flex容器和Grid容器来使用自身的定位规则。

修复方案 #

步骤1：明确网格层级 #

• 若要让嵌套元素使用上层网格的行列，需先将嵌套容器设为上层网格的一个网格项，再给嵌套容器定义内部网格模板，让子元素在内部网格中定位。
• 或者调整DOM结构，让需要定位的元素直接成为上层网格容器的子元素。

步骤2：移除冲突的布局属性 #

删除元素上同时存在的display: flex和Grid定位属性，根据需求选择Flex或Grid布局：

• 如需横向排列子元素，可在网格容器内用grid-template-columns实现，而非同时开启Flex。

步骤3：完善网格容器配置 #

给嵌套的网格容器添加grid-template-rows和grid-template-columns定义，否则子元素无法使用网格定位。

修正后的代码示例 #

CSS代码 #

/* custom property */
:root {
    --global-color-1: #21aab4;
    background-color: white;
}
* {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    border: 3px solid black;
    margin: 0;
    display: grid;
    grid-template-rows: 150px auto auto 150px;
    grid-template-columns: repeat(12, 8.3vw);
}
img {
    max-width: 100%;
    overflow: hidden;
}

#logo{
    grid-row: 1 /2; 
    grid-column: 1 / 5;
    max-width: 100%;    
    /* 给logo添加内部网格，让子元素#name可以定位 */
    display: grid;
}
#name{
    max-width: 100%;
    padding-top: 2rem;
    grid-row: 1 /2; 
    grid-column: 1 / 5;
}
#header {
    grid-row: 1 / 2; 
    grid-column: 1 / 13;
    background-color: white;
    border-bottom: 2px solid black;
}
#nav {  
    list-style-type: none;
    grid-column: 5 / 12;
    padding-top: 2.5rem;
    border-bottom: 2px solid black;
    /* 用Grid实现导航项横向排列 */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
main {
    grid-row: 2 / 4; 
    grid-column: 1 / 13;
    display: grid;
    /* 给main定义内部12列网格，匹配body的列数 */
    grid-template-columns: repeat(12, 1fr);
}

#thoughtful {
    grid-row: 1 / 3;
    grid-column: 1 /  5;
}
#s2 {
    grid-row: 1 / 3; 
    grid-column: 7 / 13;
}
#s2 h1{
    font-size: 3.2vw;
}
#s2 li{
    font-size: 2vw;
}
footer {
    grid-row: 4 / 5; 
    grid-column: 1 / 13;
    text-align: center;
    padding-top: 5vh;
    font-family: serif;
}
a:focus, a:hover {
    font-style: italic;
}

.current {
    color:  rgb(20, 111, 4);
}

HTML代码（调整内容到main标签内） #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Sage Raymond </title>
    <link rel="shortcut icon" href="images/Bear-favicon.jpg">
    <link rel="stylesheet" href="styles/main_gridexp.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div id="logo">
        <a href="index.html"><img src="images/name.gif" alt="Sage Raymond Homepage" id="name"></a>
    </div>
    <ul id="nav">
        <li class="current"><a href="index.html"><h2>Home</h2></a></li>
        <li><a href="education.html"><h2 class="current">C.V.</h2></a></li>
        <li><a href="publications.html"><h2>Papers</h2></a></li>
        <li><a href="media.html"><h2>Media</h2></a></li>
    </ul>

    <main>
        <img src="images/thoughtful_sage.jpeg" id="thoughtful">
        <ul id="s2">
            <h1>Degrees</h1>
            <li>Master of Science in Ecology, University of Alberta, January 2021 to present</li>
            <li>Bachelor of Science in Biology, Thompson Rivers University, December 2020</li>
            <li>Diploma in Recreation, Fish, and Wildlife, Selkirk College, April 2017</li>   
        </ul>
    </main>

    <footer>
        <p>&copy; 2022, Sage Raymond, Port Townsend, WA, USA 98368</p>
    </footer>
</body>
</html>

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