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
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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; }