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