我的网格一直运行良好，直到进行了一些更改为止，经过5天没有经过严格的解决，我简化了，以便于阅读。我还确保为近顶部网格项内的元素浮动添加清晰的修补程序。
我已经使用grid-template-areas和grid-template-columns来调整列的大小，并显示每个网格项应去的位置。但是，当我渲染网页时，所有项目都对齐到最左列，除了我的navbar和英雄图像已设置为100％宽度外，它们都很好。所需的网格布局在CSS文件的底部（带有媒体查询）进行了详细说明。
祝您有美好的一天，感谢您的阅读（我是新手）
HTML代码]
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link href="normalize.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<header class="navbar">
<a id="top"></a>
<img class="logo" src="randimage.png" alt="title" style=height:20px;>
<nav class="topnav">
<ul>
<li><a href="#">Learning journal</a></li>
<li><a href="/tutorial.html">Tutorial</a></li>
<li><a href="/contact.html">Contact me</a></li>
</ul>
</nav>
</header>
<div class="hero-image">
<div class="hero-text">
<h1>Learning Journal</h1>
<p>This is a log of my journey in learning how to design a web site.</p>
</div>
</div>
<nav class="week-nav">
<h2 class="contenthead">Weekly Posts</h2>
<ol>
<li><a href='#week1'>Introduction to Web Design</a></li>
<li><a href='#week2'>Learning how to make web pages</a></li>
<li><a href='#week3'>Learning about lists, quotes and tables</a></li>
<li><a href='#week4'>CSS basics</a></li>
<li><a href='#week5'>CSS box model & styling text</a></li>
<li><a href='#week6'>Responsive web design</a></li>
<li><a href='#week7'>RWD2</a></li>
<li><a href='#week8'>RWD3</a></li>
<li><a href='#week9'>HTML5 & CSS forms</a></li>
<li><a href='#week10'></a></li>
<li><a href='#week11'></a></li>
<li><a href='#ref'>References</a></li>
</ol>
</nav>
<div class="table">
<table>
<caption><strong>Personal timetable</strong></caption>
<tr>
<th>Day/Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
</tr>
<tr>
<td>9-10am</td>
<td>e</td>
<td>e</td>
<td>--</td>
</tr>
<tr>
<td>10-11am</td>
<td>e</td>
<td>e</td>
<td>e</td>
</tr>
<tr>
<td>11-12pm</td>
<td>e</td>
<td>e</td>
<td>e</td>
</tr>
<tr>
<td>12-1pm</td>
<td>e</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<td>1-2pm</td>
<td>--</td>
<td>e</td>
<td>--</td>
</tr>
<tr>
<td>2-3pm</td>
<td>e</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<td>3-4pm</td>
<td>e</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<td>4-5pm</td>
<td>e</td>
<td>--</td>
<td>--</td>
</tr>
</table>
</div>
<div class="main">
<main>
<h2>Learning Journal</h2>
<article>
<header class="post">
<a id="week8"></a>
<h3>Week 8:</h3>
<p>Published on<time datetime="2019-12-20"><strong> December 20, 2019</strong></time></p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In molestie aliquet felis sed finibus. Proin eleifend arcu at est euismod eleifend. Ut vulputate lorem eu nisi condimentum suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris tempor non purus dignissim placerat. Ut commodo, lacus in ultricies mattis, diam augue sollicitudin nisl, sagittis gravida elit tellus eu ex. Nam pellentesque egestas nisi, ac semper nulla sagittis id. Donec ligula elit, aliquet eget placerat in, accumsan sit amet mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer lacinia odio ut ornare aliquam. Donec et erat vel sem volutpat lobortis eu vel massa. Nullam sit amet dui ac nibh dignissim mollis eget nec nibh.</p>
</article>
<article>
<header class="post">
<a id="week7"></a>
<h3>Week 7:</h3>
<p>Published on<time datetime="2019-12-18"><strong> December 18, 2019</strong></time></p>
</header>
<h3>Flexible media</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In molestie aliquet felis sed finibus. Proin eleifend arcu at est euismod eleifend. Ut vulputate lorem eu nisi condimentum suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris tempor non purus dignissim placerat. Ut commodo, lacus in ultricies mattis, diam augue sollicitudin nisl, sagittis gravida elit tellus eu ex. Nam pellentesque egestas nisi, ac semper nulla sagittis id. Donec ligula elit, aliquet eget placerat in, accumsan sit amet mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer lacinia odio ut ornare aliquam. Donec et erat vel sem volutpat lobortis eu vel massa. Nullam sit amet dui ac nibh dignissim mollis eget nec nibh.</p>
</article>
<article>
<header class="post">
<a id="week6"></a>
<h3>Week 6:</h3>
<p>Published on<time datetime="2019-12-16"><strong> December 16, 2019</strong></time></p>
</header>
<h3>Week 6 outline:</h3>
<ul>
<li>Reflection & changes</li>
<li>Wireframes</li>
<li>Responsive grid layout workflow</li>
<li>RWD for mobile</li>
<li>Media queries</li>
<li>Making images flexible</li>
<li>Testing responsiveness of web page</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In molestie aliquet felis sed finibus. Proin eleifend arcu at est euismod eleifend. Ut vulputate lorem eu nisi condimentum suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris tempor non purus dignissim placerat. Ut commodo, lacus in ultricies mattis, diam augue sollicitudin nisl, sagittis gravida elit tellus eu ex. Nam pellentesque egestas nisi, ac semper nulla sagittis id. Donec ligula elit, aliquet eget placerat in, accumsan sit amet mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer lacinia odio ut ornare aliquam. Donec et erat vel sem volutpat lobortis eu vel massa. Nullam sit amet dui ac nibh dignissim mollis eget nec nibh.</p>
</article>
<article>
<header class="post">
<a id="week5"></a>
<h3>Week 5:</h3>
<p>Published on<time datetime="2019-12-10"><strong> December 10, 2019</strong></time></p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In molestie aliquet felis sed finibus. Proin eleifend arcu at est euismod eleifend. Ut vulputate lorem eu nisi condimentum suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris tempor non purus dignissim placerat. Ut commodo, lacus in ultricies mattis, diam augue sollicitudin nisl, sagittis gravida elit tellus eu ex. Nam pellentesque egestas nisi, ac semper nulla sagittis id. Donec ligula elit, aliquet eget placerat in, accumsan sit amet mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer lacinia odio ut ornare aliquam. Donec et erat vel sem volutpat lobortis eu vel massa. Nullam sit amet dui ac nibh dignissim mollis eget nec nibh.</p>
</article>
<p><a href="#top">Go to top</a></p>
</main>
</div>
<div class="aside">
<aside>
<a id="ref"></a>
<h2 class="contenthead">References</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Archive/Mozilla/Migrate_apps_from_Internet_Explorer_to_Mozilla">Examples of Web Standards</a></li>
<li><a href="https://www.linkedin.com/learning/html5-structure-syntax-and-semantics/what-are-web-semantics?u=67552674">HTML5: Structure, Syntax and Semantics</a></li>
<li><a href="https://www.w3schools.com/html/">HTML definitions & concept clarity</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">HTML elements reference</a></li>
<li><a href="https://www.tutorialrepublic.com/html-tutorial/html-lists.php">HTML Lists</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite">Quoting framework</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class and ID selectors</a></li>
</ul>
</aside>
</div>
<div class="footer">
<footer>
<a href="mailto:([email protected])">Email [myname]</a><br>
<small>© 2020, fname sname.</small>
</footer>
</div>
</div>
</body>
</html>
CSS代码
@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');
/*importing google font*/
* {box-sizing: border-box;}
#wrapper {
display: grid;
max-width: 100%;
margin: 0 auto;
}
body {
margin: 0;
padding: 0;
background: #fff;
font-family: "helvetica neue", sans-serif;
font-size: 1em;
}
body {
/*background-image: url("/ci435/images/BG_IMAGE.png");*/
/*background-repeat: repeat;*/
/*un-comment these when you have created round boxes for each element containing raw text*/
}
.navbar {
max-width: 100%;
padding: 1em 1em;
background: #000;
height: 3em;
width: 100%;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
a { text-decoration: none; color: #2c3ad1; }
a:hover { text-decoration: underline; }
a:visited { color: #5c13bd; }
a:active { color: #e8d05a; }
.topnav {
height: 3em;
font-weight: bold;
list-style: none;
float: right;
}
main {
clear: left;
}
.topnav li {
display: inline-block;
text-transform: uppercase;
line-height: 1.2em;
font-size: 0.7em;
text-indent: 3em;
}
.topnav ul {
position: relative;
bottom: 2.5em;
right: 1.6em;
}
.topnav a:link { color: lightgrey;}
.topnav a:hover {
color: #fff;
border-bottom: 1000px #fff
}
.topnav a:visited { color: #fff; }
.logo {
height: 20px;
width: 100%;
float: left;
}
.navbar:after {
content: "";
visibility: hidden;
display: block;
clear: both;
}
table {
background-color: #FFF;
border: solid 4px #4682B4;
border-spacing: 0;
text-align: center;
}
tbody tr:nth-child(even) {
background-color: #B0C4DE;
}
th {
background-color: #4682B4;
padding: 3px;
}
caption {
font-size: 1.3em;
padding-bottom: 0.5em;
/*space between caption and the table underneath*/
}
.hero-image {
background-image: linear-gradient(to bottom, rgba(0, 175, 255, 0.4), rgba(117, 19, 93, 0.73)), url("/ci435/images/bannerImages/lj.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
width: 100%;
height: 70vh;
/*justify-content: center;*/
}
.hero-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
/*GRID LAYOUT*/
.navbar {
grid-area: navbar;
}
.hero-image {
grid-area: hero;
}
.week-nav {
grid-area: week-nav;
}
.table {
grid-area: table;
}
main {
grid-area: main;
}
aside {
grid-area: aside;
}
footer {
grid-area: footer;
}
/*LAYOUT STYLES*/
#wrapper {
display: grid;
grid-template-areas:
"navbar"
"hero"
"week-nav"
"table"
"main"
"aside"
"footer";
}
@media (min-width: 750px) {
#wrapper {
grid-template-columns: 3fr 7fr;
grid-template-areas:
"navbar navbar"
"hero hero"
"week-nav table"
"week-nav main"
"aside main"
"footer footer";
}
}
@media (min-width: 1000px) {
#wrapper {
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: auto;
grid-template-areas:
"navbar navbar navbar"
"hero hero hero"
"week-nav table aside"
"week-nav main aside"
"footer footer footer";
}
}
@media (max-width: 500px) {
table {
display:none;
}
}
看来您的问题来自您的CSS选择器。
首先，您的网格未得到应用，因为在CSS中，您使用了id选择器（#wrapper），但在html中却给了它类，而不是id，即“包装器”。 将html更改为id或将css更改为类将解决此问题-如果您认为它是包装器模式，则可以重用，然后将其设置为类，否则建议将html更改为set id =“包装”。
[下一步，用于为main，aside和footer分配网格区域的选择器都是标签选择器。这里的问题是，每个main，aside和footer元素都包装在包装器内的div中，因此按层次结构实际上是#wrapper-> div容器-> main / aside / footer。因此，每个主/旁侧/页脚的网格区域属性都没有使用，因为它们实际上在#wrapper中时，在其直接父级div容器中查找网格模板区域。 要解决此问题，您可以将css中的网格区域属性从标签选择器移至div容器选择器，或者如果div容器未使用，则将其完全删除。
这里是经过修改的css，可用于网格：
@import url("https://fonts.googleapis.com/css?family=Oswald&display=swap");
/*importing google font*/
* {
box-sizing: border-box;
}
#wrapper {
display: grid;
max-width: 100%;
margin: 0 auto;
}
body {
margin: 0;
padding: 0;
background: #fff;
font-family: "helvetica neue", sans-serif;
font-size: 1em;
}
body {
/*background-image: url("/ci435/images/BG_IMAGE.png");*/
/*background-repeat: repeat;*/
/*un-comment these when you have created round boxes for each element containing raw text*/
}
.navbar {
grid-area: navbar;
max-width: 100%;
padding: 1em 1em;
background: #000;
height: 3em;
width: 100%;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
a {
text-decoration: none;
color: #2c3ad1;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: #5c13bd;
}
a:active {
color: #e8d05a;
}
.topnav {
height: 3em;
font-weight: bold;
list-style: none;
float: right;
}
main {
clear: left;
}
.topnav li {
display: inline-block;
text-transform: uppercase;
line-height: 1.2em;
font-size: 0.7em;
text-indent: 3em;
}
.topnav ul {
position: relative;
bottom: 2.5em;
right: 1.6em;
}
.topnav a:link {
color: lightgrey;
}
.topnav a:hover {
color: #fff;
border-bottom: 1000px #fff;
}
.topnav a:visited {
color: #fff;
}
.logo {
height: 20px;
width: 100%;
float: left;
}
.navbar:after {
content: "";
visibility: hidden;
display: block;
clear: both;
}
table {
background-color: #fff;
border: solid 4px #4682b4;
border-spacing: 0;
text-align: center;
}
tbody tr:nth-child(even) {
background-color: #b0c4de;
}
th {
background-color: #4682b4;
padding: 3px;
}
caption {
font-size: 1.3em;
padding-bottom: 0.5em;
/*space between caption and the table underneath*/
}
.hero-image {
background-image: linear-gradient(
to bottom,
rgba(0, 175, 255, 0.4),
rgba(117, 19, 93, 0.73)
),
url("/ci435/images/bannerImages/lj.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
width: 100%;
height: 70vh;
/*justify-content: center;*/
}
.hero-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
/*GRID LAYOUT*/
.navbar {
grid-area: navbar;
}
.hero-image {
grid-area: hero;
}
.week-nav {
grid-area: week-nav;
}
.table {
grid-area: table;
}
.main {
grid-area: main;
}
.aside {
grid-area: aside;
}
.footer {
grid-area: footer;
}
/*LAYOUT STYLES*/
.wrapper {
display: grid;
grid-template-areas:
"navbar"
"hero"
"week-nav"
"table"
"main"
"aside"
"footer";
}
@media (min-width: 750px) {
.wrapper {
grid-template-columns: 3fr 7fr;
grid-template-areas:
"navbar navbar"
"hero hero"
"week-nav table"
"week-nav main"
"aside main"
"footer footer";
}
}
@media (min-width: 1000px) {
.wrapper {
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: auto;
grid-template-areas:
"navbar navbar navbar"
"hero hero hero"
"week-nav table aside"
"week-nav main aside"
"footer footer footer";
}
}
@media (max-width: 500px) {
table {
display: none;
}
}
希望这会有所帮助！