我試圖讓標誌採用全寬，而不是在其周圍留下白色背景。
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>
我嘗試更改網格模板區域屬性，但它沒有解決我的問題
如果我這樣做的話，我只會在你想要的地方設定列和行，並省去這些區域。
我添加了一些邊框和背景顏色只是為了說明事物的位置。
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; }