由于某种原因，我的网格模板区域无法正常工作。它只是显示彼此下方的每个区域，而不是我如何设置它们。
我试图查看是否有任何拼写错误，但没有。我的浏览器确实支持网格功能。 我不知道问题是否在于我设置为网格模板行或列。
`<!DOCTYPE html>
<html>
<head>
<title>Uputstvo</title>
<link rel="stylesheet" href="styleeee.css">
</head>
<body>
<div class="LogoStranice">
<img src="add.png" alt="none">
</div>
<div class="NaslovStranice">
<h1>Dodavanje studenata na listu predmeta</h1>
<h3>Uputstvo za dodavanje studenata</h3>
</div>
<div class="Info">
<marquee>Dobrodošli na stranicu na kojoj možete dodati studente na listu predmeta. Ispravno
popunjen obrazac, kojim se student dodaje na listu, možete pronaći
na stranici<a href="uputstvo.html"> Uputstvo</a> </marquee>
</div>
<div class="Navigacija">
<ul>
<li><a href="uputstvo.html">Uputstvo</a></li>
<li><a href="dodaj.html">Dodaj studenta</a></li>
</ul>
</div>
<div class="Sadrzaj">
<p class="tekst">Da bi unos podataka, koji se odnose na studenta, bio validan, potrebno je da podaci imaju sledeću formu:<br/>
Ime i Prezime<br/>
I ime i prezime moraju biti kraćei od 20 karaktera i ne smeju sadržati brojeve.<br/>
Ispravni formati unosa su:<br/>
Petar<br/>
Marko<br/>
Marinkovic <br/>
Nevalidni formati unosa su:<br/>
01Goran<br/>
Goran01<br/>
Petrovic9<br/>
Broj indeksa<br/>
Validan format gggg/bbbb, gde gggg predstavlja godinu, dok bbbb predstavlja redni broj. Bitno je da na petoj poziciji postoji znak '/'.<br/>
Ispravni formati unosa su:<br/>
2014/000 <br/>
2015/0699<br/>
2001/0322<br/>
Nevalidni formati unosa su: <br/>
20/0001 <br/>
20011/1000<br/>
2/899 <br/>
</p>
</div>
<div class="PotpisStranice">
<p>Skolska 2022/23 Stranica poslednji put azurirana <span class="Modifikacija">18.08.2023</span> </p>
</div>
</body>
</html>`
`.body{
width:1000px;
height:700px;
display:grid;
grid-template-rows:200px 50px 400px 50px ;
grid-template-columns: 200px 800px;
grid-template-areas:
"LogoStranice NaslovStranice"
"Info Info"
"Navigacija Sadrzaj"
"PotpisStranice PotpisStranice";
margin: auto;
}
.LogoStranice{
background-color: #78fd94;
height: 200px;
width:200px;
grid-area: LogoStranice;
}
.NaslovStranice{
height: 200px;
width: 800px;
background-color: #78fd94;
text-align: center;
padding-top: 40px;
grid-area: NaslovStranice;
}
.Info{
background-color: blue;
color: white;
height: 20px;
width: 1000px;
grid-area: Info;
}
.Navigacija{
background-color: gray;
font-size: 16px;
font-weight: bold;
height: 550px;
width:200px;
grid-area: Navigacija;
}
.Sadrzaj{
background-color:#d3e9d8 ;
height: 550px;
width: 800px;
grid-area: Sadrzaj;
}
.tekst{
padding: 30px 30px 30px 30px;
}
.PotpisStranice{
grid-area: PotpisStranice;
height: 40px;
width: 1000px;
color: white;
background-color: #2034fc;
}
.Modifikacija{
color:yellow;
}
img{
height: 200px;
width: 200px;
}`
问题出在你的样式表中。您将
.body {}<body>body {
width: 1000px;
height: 700px;
display: grid;
grid-template-rows: 200px 50px 400px 50px;
grid-template-columns: 200px 800px;
grid-template-areas:
"LogoStranice NaslovStranice"
"Info Info"
"Navigacija Sadrzaj"
"PotpisStranice PotpisStranice";
margin: auto;
}
但是，不建议仅出于样式目的使用
<body><body>相反，创建一个特定于您当前正在处理的页面布局的包装器会更好，并且它会为您省去一些麻烦。
另一个（真正）好的实践是编写语义 HTML。以您的代码为例：让我们将其分为三个部分：
<header><main><footer>现在我们可以单独设置每个样式，使代码维护更容易并增加灵活性。
我创建了一个 codepen 来说明一种更好的布局方法；我希望你不介意:) 代码中有注释解释了建议。
一些参考：
CSS 中的布局包装器样式（优秀文章）