在 HTML 布局中将背景颜色设置为网格行的最佳方法是什么

Question

我有一个两行三列的网格，如下图所示。

我正在为网格使用以下 CSS 属性：

.grid-container{
  display:grid;
  grid-template-columns: 20vw 60vw 20vw;
  grid-template-rows:100px calc(100vh - 100px);
}

我可以执行以下操作将第一行的背景颜色设置为白色：

.grid-container > div:nth-child(1),
                  div:nth-child(2),
                  div:nth-child(3) {
  background: white;
}

但这是一个好方法吗？ 有没有办法直接在.grid-container class 中为网格模板行着色？

片段

 body{margin:0}.grid-container{ display:grid; grid-template-columns: 20vw 60vw 20vw; grid-template-rows:100px calc(100vh - 100px); }.grid-container > div:nth-child(1), div:nth-child(2), div:nth-child(3) { background: blue; }.grid-container > div { border:1px solid black; }

 <div class="grid-container"> <!-- header --> <div></div> <div></div> <div></div> <!-- main content --> <div></div> <div></div> <div></div> </div>

Answer 1

最佳方式 = 使用class 选择器。

 body { margin: 0 }.grid-container { display: grid; grid-template-columns: 20vw 60vw 20vw; grid-template-rows: 100px calc(100vh - 100px); }.first-row { background: blue; }.first-row.third { background-color: lightblue; }.grid-container>div { border: 1px solid black; }.main { background-color: orange; }

 <div class="grid-container"> <!-- header --> <div class="first-row"></div> <div class="first-row"></div> <div class="first-row third"></div> <!-- main content --> <div class="main"></div> <div class="main"></div> <div class="main"></div> </div>