我试图让徽标采用全宽，而不是在其周围留下白色背景。
1
758body {
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>
我尝试更改网格模板区域属性，但它没有解决我的问题
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
如果我这样做的话，我只会在你想要的地方设置列和行，并省去这些区域。
我添加了一些边框和背景颜色只是为了说明事物的位置。
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; }