Question

我的网格：

<input type="time" name="time" />

我的专栏：

.grid {
  display: grid;
  grid-template-columns: 370px 1fr 1fr 1fr 370px;
  grid-template-areas:
  ". title title title ."
  ". about about about ."
  ". sidebar content content ."
  ". footer footer footer. ";
}

我想这样做，以便#EBEBEB是整个.about { grid-area: about; padding-top: 50px; padding-bottom: 50px; background-color: #EBEBEB; }行的背景颜色。那么，我如何使这些370px的部件也变灰呢？

Answer 1

您可以指定 grid-column-start 和 grid-column-end 来控制哪些部分是彩色的。假设您正在询问如何使整个行保持.about类灰色，那么您分别在寻找1和6：

.about {
    grid-column-start: 1;
    grid-column-end: 6;
}

这可以在以下内容中看到：

* {
  margin: 0;
  padding: 0;
}

body,
html {
  height: 100%;
}

.bg-img {
  opacity: 0.95;
  background-image: linear-gradient( rgba(0, 0, 0, 0.27), rgba(0, 0, 0, 0.27)), url(http://i.pi.gy/5mWAw.jpg);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.centered {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

h1 {
  font-family: 'Lato', sans-serif;
  color: white;
  font-weight: 600;
  font-size: 100px;
}

h2 {
  font-family: 'Lato', sans-serif;
  color: black;
  font-size: 40px;
  text-align: center;
}

.grid {
  display: grid;
  grid-template-columns: 370px 1fr 1fr 1fr 370px;
  grid-template-areas: ". title title title ." ". about about about ." ". sidebar content content ." ". footer footer footer. ";
}

.title {
  grid-area: title;
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: #FFFFFF;
}

.about {
  grid-area: about;
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: #EBEBEB;
  grid-column-start: 1;
  grid-column-end: 6;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

<div class="bg-img">
  <h1 class="centered">Hi, I'm Karlo,<br>a Web Developer.</h1>
</div>

<div class="grid">
  <div class="title">
    <h2>My skills</h2>
  </div>
  <div class="about">
    <h2>About Me</h2>
  </div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content
    <p>A</p>
    <p>B</p>
  </div>
  <div class="footer">Footer</div>
</div>

我还创建了一个展示 here 的新笔。

希望这有帮助！：）

CSS网格，如何为网格外的区域着色

1 个答案: