我的理解是,您只希望有1行(边界半径:5px;)并且边界半径会影响节内的所有内容。
附上您找到的代码片段和解决方案。
您基本上需要首先定义每个网格区域。第二步,可以用一条线定义边界半径。
#page {
display: grid;
width: 100vw;
height: 100vh;
grid-template-areas: "head head"
"nav main"
"nav foot";
grid-template-rows: 1fr 3fr 1fr;
grid-template-columns: 1fr 6fr;
grid-gap: 10px;
}
#page > header {grid-area: head; background-color: #8ca0ff;}
#page > nav {grid-area: nav; background-color: #ffa08c;}
#page > main {grid-area: main; background-color: #ffff64;}
#page > footer {grid-area: foot; background-color: #8cffa0;}
#page > header,
#page > nav,
#page > main,
#page > footer {
border-radius: 5px;
}
<section id="page">
<header>Header</header>
<nav>Navigation</nav>
<main>Main area</main>
<footer>Footer</footer>
</section>
