Довольно сбит с толку - я имею в виду раздел .grid2, в котором я пытался изменить все классы и сделать их более или менее точными. c Может ли это быть связано с оболочкой сетки снаружи? Странно, но раздел узнает, что есть сетка из 3 столбцов, но не распознает строки (даже когда я их определяю), вот код
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Powerwashing</title>
</head>
<body>
<div class="wrapper">
<div class="header">
<ul>
<li><a class="a" href="#">About us</a></li>
<li><a class="s" href="#">Services</a></li>
<li> <a class="l"href="#"></a><img src="wash.png" width=100px alt="Powerwashing services">
</a>
</li>
<li><a class="w" href="#">Why us</a></li>
<li><a class="c" href="#">Contact us</a></li>
</ul>
</div>
<div class="grid2">
<section class="se">
<h2>Services</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates minus molestias quaerat laudantium. Ab nihil eius velit nisi tempora quibusdam illo animi esse provident corporis fuga, minima, numquam obcaecati ut atque molestias cum. Tenetur magni adipisci porro eum mollitia, dolor dolorem repellendus aspernatur quibusdam architecto nobis, ab cum, aliquid nulla?
</p>
</section>
<section class="ab">
<h3>About us</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos eligendi, dolor obcaecati. Fuga corporis aliquid possimus, deserunt earum ut quod, quia maxime, optio dolorem laudantium soluta quae omnis pariatur iusto natus veniam rerum labore tenetur veritatis eius deleniti. Qui, tempora.
</p>
</section>
<section class="wh">
<h3>Why us</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora nemo exercitationem maiores excepturi vero asperiores, quaerat necessitatibus. Aspernatur, veniam voluptas earum esse rerum, expedita hic in quam alias sunt laudantium quisquam ducimus iste sit iusto quaerat labore molestias saepe quo.
</p>
</section>
</div>
</div>
</body>
</html>
CSS:
*{
margin:0px;
padding:0px;
}
.wrapper{
display: grid;
}
.header ul{
list-style-type: none;
background-color: green;
padding:20px;
text-align: center;
display:grid;
grid-template-columns: repeat(5,1fr);
grid-template-areas:
"a s l w c";
align-items: center;
}
.header a{
background-color: red;
font-size: 20px;
padding:5px;
}
a .a{
grid-area:a;
}
a .s{
grid-area:s;
}
a .l{
grid-area: l;
}
a .w{
grid-area:w;
}
a .c{
grid-area:c;
}
.grid2{
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-areas:
"se wh wh"
"se ab ab";
}
section .se h3 p{
grid-area: se;
}
section .ab h3{
grid-area: ab;
}
section .wh h3{
grid-area: wh;
}