嵌套网格未响应行

问题描述 投票:0回答:1

相当困惑-我指的是.grid2部分,我试图更改所有类并使其或多或少地具有特定性,这可能与外部的网格包装有关吗?奇怪的是,本节将认识到有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;
}
html css css-grid
1个回答
0
投票

所以似乎是因为我正在调用section标记,并且每个部分都有一个单独的section标记,我不确定为什么这行不通?

© www.soinside.com 2019 - 2024. All rights reserved.