我的徽标文本在网格显示中未正确显示

Question

我试图让徽标采用全宽，而不是在其周围留下白色背景。

body {
  text-transform: capitalize;
  margin: 0;
}

.page {
  background-image: url(./hero-bg.jpg);
  display: grid;
  height: 100vh;
  grid-template-columns: 10% auto;
  grid-template-rows: 15% auto auto auto;
  grid-template-areas: "logo header header header" "sidebar section section section" "sidebar main main main " "sidebar footer footer footer";
}

.logo {
  grid-area: logo;
  background-color: rgba(255, 0, 0, 0.55);
}

<div class="page">
  <nav>
    <ul>
      <li><a href="#">home</a></li>
      <li><a href="#">about</a></li>
      <li><a href="#">policy</a></li>
      <li><a href="#">contact</a></li>
    </ul>
  </nav>
  <h1 class="logo">Batoot</h1>
  <aside>sidebar</aside>
  <section>section</section>
  <main>main content</main>
  <footer>footer</footer>
</div>

我尝试更改网格模板区域属性，但它没有解决我的问题

Answer 1

如果我这样做的话，我只会在你想要的地方设置列和行，并省去这些区域。

我添加了一些边框和背景颜色只是为了说明事物的位置。

body {
  text-transform: capitalize;
  margin: 0;
  background-color: #FFFF3344;
  padding-top: 0;
  border: solid green 1px;
}

nav {
  display: none;
}

.page {
  background-color: #0000FF0C;
  border: solid 1px cyan;
  background-image: url(./hero-bg.jpg);
  display: grid;
  grid-template-columns: 10% 1fr;
  grid-template-rows: auto 1fr 1fr 1fr;
}

.logo {
  grid-area: logo;
  grid-column: 1 / 3;
  grid-row: 1 / 1;
  background-color: rgba(255, 0, 0, 0.55);
  border: solid 2px lime;
  /* deal with using h1 not a div by setting margin and padding */
  margin: 0;
  padding: 0;
}

section {
  grid-column: 2;
  grid-row: 2;
}

main {
  grid-column: 2;
  grid-row: 3;
}

aside {
  grid-column: 1;
  grid-row: 2 / 5;
  border: solid blue 1px;
}

footer {
  grid-column: 2 / 3;
}

  

    

      
home
      
about
      
policy
      
contact
    
  
  
Batoot
  
sidebar
  
section
  
main content
  
footer