Question

我是使用CSS网格的新手，并观看了一些有关它的视频，在所有视频中，我都看到了属性grid-template-areas，这似乎很酷，因为您只需定义相同的名称来跨越网格项目，但对我没有用，这是我的html：

body {
  display: grid;
  grid-template-areas: "header header" "adds content";
  grid-template-rows: 3em auto;
  grid-template-columns: 20em 1fr;
}

.top-menu {
  grid-area: "header";
  grid-column: span 2;
  background-color: #B6B0A9;
}

<div class="top-menu">
  <ul>
    <li><a href="#" class="menu-item">Hi</a></li>
    <li><a href="#" class="menu-item">Lo</a></li>
  </ul>
</div>

当我仅使用grid-area:"header";时，在两列中都没有包含top-menu类的div，这就是为什么我不得不使用grid-column:span 2;的原因-模板区域行为？还是这不是正确的配置？

Answer 1

从网格开始，这也是我一直在努力的事情，很容易忽略：

使用grid-area时，不使用"来定义区域。因此，使用"header"

代替header

body {
  display: grid;
  grid-template-areas: "header header" "adds content";
  grid-template-rows: 3em auto;
  grid-template-columns: 20em 1fr;
}

.top-menu {
  grid-area: header;
  grid-column: span 2;
  background-color: #B6B0A9;
}

.adds {
  grid-area: adds;
}

.content {
  grid-area: content;
}

<div class="top-menu">
  <ul>
    <li><a href="#" class="menu-item">Hi</a></li>
    <li><a href="#" class="menu-item">Lo</a></li>
  </ul>
</div>

<div class="adds">
  Some adds
</div>
<div class="content">
  Here is some content
</div>

Answer 2

<!DOCTYPE html>
<html>
<head>
<style>
.item1 {
  grid-area: myArea;
}

.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea . . .';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The grid-template-areas Property</h1>

<p>You can use the <em>grid-template-areas</em> property to set up a grid layout.</p>
<p>Item1, is called "myArea" and will take up the place of two columns (out of five):</p>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
</div>

</body>
</html>

CSS网格模板区域没有自动列跨度

2 个答案: