我所尝试的一切都不起作用，我需要简单的代码来将其放在div的底部，而不是将整个div变成一个网格，只将底部的网格作为文本。我是html/css的新手，所以老实说，我只知道页面上真正的内容。垂直对齐底部也不起作用。。。
<!DOCTYPE html>
<html>
<head>
<title>Making a Shop Landing Page</title>
</head>
<style>
*{
box-sizing:border-box;
margin:0;
padding:0;
}
body{
background-color:#eee;
}
main{
height:100%;
}
html, body {
height:100%;
margin:0;
}
.container{
display:grid;
grid-template-areas:
"header header header"
"ads main main"
"footer footer footer";
height:100%;
width:100%;
grid-template-rows:20% 70% 10%;
grid-template-columns:20% 80%;
}
.grid-item{
border:black solid 3px;
}
.header{
grid-area:header;
}
.ads{
grid-area:ads;
width:100%;
}
.main{
grid-area:main;
height:100%;
}
.footer{
grid-area:footer;
}
#navbar {
height: 100px;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #eee;
padding: 0;
margin: 0;
border:black solid 2px;
}
#header{
text-align:center;
vertical-align:bottom;
}
</style>
<body>
<main>
</div>
<div class="container">
<div class="header grid-item">
<h1 id="header">This is the Title</h1>
</div>
<div class="ads grid-item"><p>awdsmapwdsmaswdpawmda wdawpmds awpdsmawp dmaw </p></div>
<div class="main grid-item">
<h1>awdawdaswdawd awdasw daw dsawd awd aw dawd awda dwa daw daw wdaw;lds anmw;dsnaswsd nwa;lds naw;kd nwa;ds naw;dn aw awdknawidgawpidhawd'ajdswn'awnda'swnda'wdnasw'dnaw'dnawds'awndanlw'dl </h1>
</div>
<div class="footer grid-item"></div>
</div>
</main>
</body>
</html>
为了使其位于div的底部，您可以使容器处于相对位置，然后使文本处于绝对位置，并将其放在您想要的确切位置
.header{
position: relative;
}
#header{
position: absolute;
bottom: 0px;
left: 50%;
}
尝试添加给定的代码。
.header{
grid-area:header;
display: flex;
align-items: flex-end;
justify-content: center;
}