Le texte de mon logo ne s'affiche pas correctement dans l'affichage de la grille

Question

J'ai essayé de faire en sorte que le logo soit en pleine largeur au lieu de laisser un fond blanc autour.

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>

J'ai essayé de modifier les propriétés de la zone du modèle de grille mais cela n'a pas résolu mon problème

Answer 1

Si je faisais cela, je définirais simplement les colonnes et les lignes là où vous le souhaitez et laisserais de côté ces zones.

J'ai ajouté des bordures et une couleur d'arrière-plan juste pour illustrer où se trouvent les choses.

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