在使用html节标记时在CSS-Grid上提供相同的css属性。

Question

我知道：

在CSS-Grid中，将相同的css属性(例如border-radius: 5px;)提供给一行参见此示例中的所有div。

我也知道：

在CSS-Grid部分给css属性，border-radius: 5px;给每个块请看这里。

我的问题是：

我如何键入“边框半径: 5px"，一次，这将影响到这里部分内的所有块？

注意，为了使用CSS Grid，我需要使用html部分

Answer 1

我的理解是，您希望CSS文件中只有一行(边框半径: 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>

​