Так что я должен сделать адаптивный сайт с большим количеством фотографий.Прямо сейчас я хочу иметь сетку с только строками.Поэтому, чтобы проверить, все ли работает, я создаю сетку из 3 строк и помещаю 3 делителя в этот контейнер.Чем я даю 3 деления строки и цвет фона.Но по какой-то причине первая строка заполнена цветом фона, а две другие строки заполнены на 50%. Как это вообще возможно
html {
root: font-size: 62.5%;
}
header {
height: 100%;
width: 100vw;
position: relative;
}
img {
margin-left: auto;
margin-right: auto;
display: inline-block;
text-align: center;
}
nav {
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
}
nav li {
display: inline-flex;
justify-content: center;
height: 100%;
margin-right:auto;
margin-left: auto;
padding: 8px 13px 8px 3px;
}
nav a {
color: black;
font-weight: bold;
}
main {
height: 300vh;
width: 100vw;
}
.grid {
height:300vh;
width: 100vw;
display: grid;
grid-template-rows: 1fr 1fr 1fr;
}
.grid div {
background-color: red;
grid-row: 1;
background-image:
}
.grid div:nth-child(2) {
background-color: green;
grid-row: 2;
background-image:
}
.grid div:nth-child(3) {
background-color: blue;
grid-row: 3;
background-image:
}
<body>
<header>
<nav>
<img src="Logo.png" width="30%" height="30%">
<ul>
<a href="#"><li>Home</li></a>
<a href="#"><li>Gallery</li></a>
<a href="#"><li>About</li></a>
</ul>
</nav>
</header>
<main>
<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</main>
</body>