使用 html 部分标签时在 CSS-Grid 处给出相同的 css 属性

Question

我知道：

在 CSS-Grid with html dives，给所有 css 属性（例如 border-radius: 5px;） =42=] 在一行中 see this example

我知道：

at CSS - 带有 html 部分的网格给每个块 css 属性, border-radius: 5px; see here

我的问题是：

我怎样才能输入一次 "border-radius: 5px"，它会影响 here 部分内的所有块？

注意，我需要使用 html 部分才能使用 CSS 网格

Answer 1

我的理解是，您希望 CSS 文件中只有 1 行 (border-radius: 5px;)，并且 border-radius 会影响部分内的所有内容。

附件是包含解决方案的代码片段。您基本上需要先定义每个网格区域。作为第二步，您可以用一条线定义边界半径。

#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>

使用 html 部分标签时在 CSS-Grid 处给出相同的 css 属性

giving same css property at CSS-Grid when using html section tag

html

css

properties

css-grid