Teks logo saya tidak dipaparkan dengan betul dalam paparan grid

Question

Saya cuba menjadikan logo lebar penuh dan bukannya meninggalkan latar belakang putih di sekelilingnya.

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>

Saya cuba menukar sifat kawasan templat grid tetapi ia tidak menyelesaikan masalah saya

Answer 1

Jika saya melakukan ini, saya hanya akan menetapkan lajur dan baris di tempat yang anda inginkan dan meninggalkan kawasan tersebut.

Saya menambah beberapa jidar dan warna latar belakang hanya untuk menggambarkan lokasi.

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