基本上，此页面只是一团糟，除特殊问题外，我可能还需要一般性建议。
[尝试编码标准的Header，Hero图片，然后我要在下面放置文本和链接的图片（到目前为止还没有）。我将告诉各节转到特定的行和列，而不一定要到那里。
[此外，当我尝试在移动版Chrome开发工具中查看时，该视图始终会放大，我不确定为什么。我尝试将孩子divs换成数字标签，然后情况变得更糟，所以我又换回来了：不知道那是什么。
此外，我也希望网格为vh和vw的100％，但不是。
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<meta charset="utf-8">
<link rel="icon" href="Logo2.jpeg">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PancakeArtwork.com Learning Page</title>
<style>
/*Mobile Style*/
body {
font-family: 'Montserrat', sans-serif;
/* background-image: radial-gradient(circle at 50% 34%, #cab062, #b38454, #99744f, #926252,#906050,#875647, #907551);*/
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.learningGrid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 15vh 15vh 15vh 15vh 15vh;
height: 100vh;
width: 100vw;
}
.header {
grid-column: 1 / span 12;
grid-row: 1 / span 2;
background-color: gold;
height: 15vh;
width: 100vw;
min-height: 1px;
}
.logo {
grid-column: 1 / 4;
width: 15vw;
height: 15vh;
}
.title {
grid-column-start: 2;
grid-column-end: 10;
grid-row-start: 1;
grid-row-end: 2;
text-align: center;
font-size: 4vw;
color: brown;
}
.aboutUs {
grid-column-start: 10;
grid-column-end: 12;
grid-row-start: 1;
grid-row-end: 2;
font-size: 3vw;
color: brown;
}
.hero {
grid-column-start: 1;
grid-column-end: 12;
grid-row-start: 2;
grid-row-end: 4;
}
.adviceColumn {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 4;
grid-row-end: 5;
font-size: 5vw;
justify-content: center;
align-content: center;
color: brown;
}
.newsColumn {
grid-column-start: 3;
grid-column-end: 6;
grid-row-start: 4;
grid-row-end: 5;
font-size: 5vw;
justify-content: center;
align-content: center;
color: brown;
}
.communityColumn {
grid-column-start: 6;
grid-column-end: 9;
grid-row-start: 4;
grid-row-end: 5;
font-size: 5vw;
justify-content: center;
align-content: center;
color: brown;
}
</style>
</head>
<body>
<div class="learningGrid">
<div class="header">
<div class="logo">
<a href="index.html" title="PancakeArtwork.com navigation page"><img src="Logo2.jpeg" class="logo" alt="PancakeArtwork.com - Navigation Page"></a>
</div>
<div class="title">PancakeArtwork.com <br> Learning Page</div>
<div class="aboutUs">About Us</div>
</div>
<div class="hero"><img src="books2.jpg" alt="Picture of Books to Represent Learning" ;></div>
<main>
<div class="adviceColumn">Advice</div>
<div class="newsColumn">News</div>
<div class="communityColumn">Community</div>
</main>
</div>
</body>
</html>基本上，此页面只是一团糟，除了特殊问题外，我可能还需要一般性建议。尝试编写标准标题Header图像，然后我要放置文本和链接的图像...
Lazarus收到了很多反馈。最终，使用CSS创建表比尝试使用Grid进行结构设计要有效得多，因此我放弃了网格并使用表放置了项。
@@ Lazarus我认为您遇到的主要问题是learningGrid仅具有三个直接子代：标头，英雄和主要。当您将其设置为显示网格时，只能在网格中为这三个子项指定位置。您可以在这些元素的每个元素上使用其他网格，以依次放置其子元素。 –拉撒路2天前