CSS Grid布局求助：aside无法显示及figure区域图片布局异常

开发者阿泽

2026-7-9

CSS Grid布局问题排查与修复

问题描述

这是我第三个Web开发项目，目前在CSS Grid布局上遇到两个核心问题：

预览页面时aside区域仅显示空白，其余区域均正常；
尝试在figure区域添加图片时，要么撑爆整个布局，要么仅占据单个网格单元，无法填充预期的完整网格区域。
已耗时12小时排查仍未找到症结，担心问题会蔓延至其他网格区域。

原代码

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Catherine's Canine Classes</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="container">
    <p id="header">Hello</p>
    <p id="nav">nav</p>
    <p id="figure">Figure</p>
    <p id="figcaption">figcap</p>
    <p id="nav1">nav1</p>
    <p id="form">form</p
    <p id="aside">aside</p>
    <p id="footer">footer</p>
    <p id="section1">section1</p>
    <p id="section2">section2</p>
    <p id="section3">section3</p>
    <p id="section4">section4</p>
  </div>
</body>
</html>

CSS

body {
  overflow: hidden;
  background-image: url('Background.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  margin: 0;
  padding: 0;
}
* {
  font-family: 'Josefin Sans', sans-serif;
  line-height: 1.4;
  font-size: 16pt;
  margin: 5px;
}
a[href] {
  cursor:pointer;
}
#header {
  grid-area: header;
  justify-content: center;
  align-content: center;
}
#figure {
  grid-area: figure;
  justify-content: stretch;
  align-content: stretch;
}
#nav {
  grid-area: nav;
  justify-content: center;
  align-content: center;
}
#aside {
  grid-area: aside;
  justify-content: center;
  align-content: center;
}
#nav1 {
  grid-area: nav1;
  justify-content: stretch;
  align-content: stretch;
}
#form {
  grid-area: form;
  justify-content: center;
  align-content: center;
}
#section1 {
  grid-area: section1;
  justify-content: center;
  align-content: start;
}
#section2 {
  grid-area: section2;
  justify-content: center;
  align-content: start;
}
#section3 {
  grid-area: section3;
  justify-content: center;
  align-content: start;
}
#section4 {
  grid-area: section4;
  justify-content: center;
  align-content: start;
}
#footer {
  grid-area: footer;
  justify-content: center;
  align-content: start;
}
#figcaption {
  grid-area: figcaption;
  justify-content: start;
  align-content: center;
}
@media only screen and (max-width : 1600px) and (min-width : 1281px) {
  .container {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 24% repeat(4, 19%);
    grid-template-rows: 25% 30% 30% 15% 20% 60% 20%;
    grid-template-areas:
      "header figure figure figure figure"
      "nav figure figure figure figure"
      "nav figure figure figure figure"
      "aside nav1 nav1 nav1 nav1"
      "aside form form form form"
      "aside section1 section2 section3 section4"
      "footer footer footer footer footer";
    justify-items: stretch;
    align-items: stretch;
    background-color: #ffffff77;
    overflow-x: hidden;
    overflow-y: scroll;
  }
}
@media only screen and (max-width : 1280px) and (min-width : 701px) {
  .container {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(4, 25%);
    grid-template-rows: 25% 40% 15% 20% 60%;
    grid-template-areas:
      "header nav nav nav"
      "figure figure figure figure"
      "nav1 nav1 nav1 nav1"
      "form form form form"
      "section1 section2 section3 section4";
    justify-items: stretch;
    align-items: stretch;
    background-color: #ffffff77;
    overflow-x: hidden;
    overflow-y: scroll;
  }
}
@media only screen and (max-width : 700px) and (min-width : 0px) {
  .container {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 20pt 30% 40% 15% 30% repeat(4, 50%); 
    grid-template-areas: 
      "nav"
      "header"
      "figure"
      "figcaption"
      "form"
      "section1"
      "section2"
      "section3"
      "section4";
    justify-items: stretch;
    align-items: stretch;
    background-color: #ffffff77;
    overflow-x: hidden;
    overflow-y: scroll;
  }
}

问题根源与修复方案

1. aside区域空白的核心原因

HTML中<p id="form">form</p>标签未闭合，导致浏览器解析DOM时出现错误，后续的aside元素被错误嵌套或忽略，直接引发aside区域无法正常渲染。

修复：
补全form标签的闭合部分：

<p id="form">form</p>

2. figure区域图片布局问题

问题点：

全局*选择器设置的margin:5px会给所有网格项添加外边距，破坏Grid布局的精确对齐；
网格行高使用百分比叠加总和超过100%（大屏幕下rows总和为25%+30%+30%+15%+20%+60%+20%=200%），导致容器高度溢出，图片容易撑爆布局；
图片未设置自适应样式，默认尺寸会超出网格单元或无法填充整个区域；
网格项未设置display:flex，justify-content和align-content属性无法生效。

修复步骤：

（1）调整全局样式与网格间距

移除全局*的margin:5px，改用Grid容器的gap属性设置网格项间距：

* {
  font-family: 'Josefin Sans', sans-serif;
  line-height: 1.4;
  font-size: 16pt;
  margin: 0;
  padding: 0;
}

/* 在所有媒体查询的.container中添加 */
gap: 5px;

（2）修复网格行高比例

将百分比行高改为fr单位，按比例分配容器高度，避免总和溢出：

/* 大屏幕媒体查询中修改rows */
grid-template-rows: 2fr 3fr 3fr 1.5fr 2fr 6fr 2fr;

/* 中屏幕媒体查询修改rows */
grid-template-rows: 2fr 4fr 1.5fr 2fr 6fr;

/* 小屏幕媒体查询修改rows */
grid-template-rows: 20pt 3fr 4fr 1.5fr 3fr repeat(4, 5fr);

（3）设置图片自适应样式

给figure内的图片添加自适应规则，使其填充整个网格单元：

#figure img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例同时填充容器 */
}

（4）给网格项添加flex布局

所有设置了justify-content的网格项需要添加display:flex，否则对齐属性无效：

#header, #nav, #aside, #form, #section1, #section2, #section3, #section4, #footer, #figcaption {
  display: flex;
}
#figure, #nav1 {
  display: flex;
}

修改后的完整代码

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Catherine's Canine Classes</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="container">
    <p id="header">Hello</p>
    <p id="nav">nav</p>
    <p id="figure">Figure <img src="your-image.jpg" alt="Dog training class"></p>
    <p id="figcaption">figcap</p>
    <p id="nav1">nav1</p>
    <p id="form">form</p>
    <p id="aside">aside</p>
    <p id="footer">footer</p>
    <p id="section1">section1</p>
    <p id="section2">section2</p>
    <p id="section3">section3</p>
    <p id="section4">section4</p>
  </div>
</body>
</html>

CSS

body {
  overflow: hidden;
  background-image: url('Background.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  margin: 0;
  padding: 0;
}
* {
  font-family: 'Josefin Sans', sans-serif;
  line-height: 1.4;
  font-size: 16pt;
  margin: 0;
  padding: 0;
}
a[href] {
  cursor:pointer;
}
#header {
  grid-area: header;
  display: flex;
  justify-content: center;
  align-items: center;
}
#figure {
  grid-area: figure;
  display: flex;
  justify-content: stretch;
  align-items: stretch;
}
#figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#nav {
  grid-area: nav;
  display: flex;
  justify-content: center;
  align-items: center;
}
#aside {
  grid-area: aside;
  display: flex;
  justify-content: center;
  align-items: center;
}
#nav1 {
  grid-area: nav1;
  display: flex;
  justify-content: stretch;
  align-items: stretch;
}
#form {
  grid-area: form;
  display: flex;
  justify-content: center;
  align-items: center;
}
#section1 {
  grid-area: section1;
  display: flex;
  justify-content: center;
  align-items: start;
}
#section2 {
  grid-area: section2;
  display: flex;
  justify-content: center;
  align-items: start;
}
#section3 {
  grid-area: section3;
  display: flex;
  justify-content: center;
  align-items: start;
}
#section4 {
  grid-area: section4;
  display: flex;
  justify-content: center;
  align-items: start;
}
#footer {
  grid-area: footer;
  display: flex;
  justify-content: center;
  align-items: start;
}
#figcaption {
  grid-area: figcaption;
  display: flex;
  justify-content: start;
  align-items: center;
}
@media only screen and (max-width : 1600px) and (min-width : 1281px) {
  .container {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 24% repeat(4, 19%);
    grid-template-rows: 2fr 3fr 3fr 1.5fr 2fr 6fr 2fr;
    grid-template-areas:
      "header figure figure figure figure"
      "nav figure figure figure figure"
      "nav figure figure figure figure"
      "aside nav1 nav1 nav1 nav1"
      "aside form form form form"
      "aside section1 section2 section3 section4"
      "footer footer footer footer footer";
    gap: 5px;
    justify-items: stretch;
    align-items: stretch;
    background-color: #ffffff77;
    overflow-x: hidden;
    overflow-y: scroll;
  }
}
@media only screen and (max-width : 1280px) and (min-width : 701px) {
  .container {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(4, 25%);
    grid-template-rows: 2fr 4fr 1.5fr 2fr 6fr;
    grid-template-areas:
      "header nav nav nav"
      "figure figure figure figure"
      "nav1 nav1 nav1 nav1"
      "form form form form"
      "section1 section2 section3 section4";
    gap: 5px;
    justify-items: stretch;
    align-items: stretch;
    background-color: #ffffff77;
    overflow-x: hidden;
    overflow-y: scroll;
  }
}
@media only screen and (max-width : 700px) and (min-width : 0px) {
  .container {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 20pt 3fr 4fr 1.5fr 3fr repeat(4, 5fr); 
    grid-template-areas: 
      "nav"
      "header"
      "figure"
      "figcaption"
      "form"
      "section1"
      "section2"
      "section3"
      "section4";
    gap: 5px;
    justify-items: stretch;
    align-items: stretch;
    background-color: #ffffff77;
    overflow-x: hidden;
    overflow-y: scroll;
  }
}

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

CSS Grid布局求助：aside无法显示及figure区域图片布局异常

问题描述 #

原代码 #

HTML #

CSS #

问题根源与修复方案 #

1. aside区域空白的核心原因 #

2. figure区域图片布局问题 #

问题点：

（1）调整全局样式与网格间距

（2）修复网格行高比例

（3）设置图片自适应样式

（4）给网格项添加flex布局

修改后的完整代码 #

HTML #

CSS #

问题描述

原代码

HTML

CSS

问题根源与修复方案

1. aside区域空白的核心原因

2. figure区域图片布局问题

修改后的完整代码

HTML

CSS