html - 将 CSS 应用于一行网格模板区域

Question

我是编码新手。我正在做一个初学者的元素，我正在尝试复制 Google 的高级搜索页面。我正在使用 display: grid; 制作标题并希望将背景颜色应用于各个行。

#header{
    display: grid;
    grid-template-columns: 100px 1fr 50px;
    grid-template-rows: 50px 200px;
    grid-template-areas:
    "google-logo . search"
    "advanced-search . ."
    }

在上面的例子中，我想要带有 google-logo . search 的行具有灰色的背景颜色。任何帮助将不胜感激，谢谢!

Answer 1

您可以使用元素 - 或如下所示的伪元素 - 为特定行着色。

#header {
  height: 300px;
  display: grid;
  grid-template-columns: 100px 1fr 50px;
  grid-template-rows: 50px 200px;
  grid-template-areas: "google-logo . search" "advanced-search . ."
}

#header::before {
  content:'';
  background:gray;
  grid-column: google-logo / search;
  grid-row: google-logo / search;
}

/* others */

#header div:nth-child(1) {
  background: yellow;
  grid-area: google-logo;
  margin:5px;
}

#header div:nth-child(2) {
  background: red;
  grid-area: search;
  margin:5px;
}

#header div:nth-child(3) {
  background: blue;
  grid-area: advanced-search;
}

<div id="header">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>