html - 网格模板列不工作

Question

我有一个方 block ，display: grid。

按照思路，第一个元素应该拉伸(stretch)成2列2行，其他各占一个cell。

但是 grid-template-columns 属性对我不起作用，无论我放在那里什么值，内容都不会移动。

现在第一个元素只进入了第一个单元格，越界了，但没有在两列和两行上拉伸(stretch)。

我的问题在哪里？

我需要什么:

.exclusive-content {
  display: grid;
  grid: 270px 270px / repeat(4, 270px);
  justify-content: center;
  grid-gap: 30px;
  margin-top: 120px;
}

.exclusive-content img {
  background-size: cover;
  background-position: center;
}

.exclusive-content a:first-child {
  width: 540px;
  height: 540px;
  grid-template-columns: 1 / 3;
  grid-template-rows: 1 / 3
}

.exclusive-content a:nth-child(2) {
  grid-template-columns: 3;
}

<div class="exclusive-content">
  <a href="#"><img src="http://anti-naruto.ru/img/product-1-lg.jpg" alt="1"></a>
  <a href="#"><img src="http://anti-naruto.ru/img/product-2-sm.jpg" alt="2"></a>
  <a href="#"><img src="http://anti-naruto.ru/img/product-3-sm.jpg" alt="3"></a>
  <a href="#"><img src="http://anti-naruto.ru/img/product-4-sm.jpg" alt="4"></a>
  <a href="#"><img src="http://anti-naruto.ru/img/product-5-sm.jpg" alt="5"></a>
</div>

Answer 1

您已经在子网格上使用了 grid-template-columns 和 grid-template-rows 属性。这些属性与容器上的 display: grid 一起使用。

对于网格的直接子元素，使用grid-column和 grid-row .

.exclusive-content {
  display: grid;
  grid: 270px 270px / repeat(4, 270px);
  justify-content: center;
  grid-gap: 30px;
  margin-top: 120px;
}

.exclusive-content img {
  background-size: cover;
  background-position: center;
}

.exclusive-content a:first-child {
  width: 540px;
  height: 540px;
  grid-column: 1 / 3;
  grid-row: 1 / 3
}

.exclusive-content a:nth-child(2) {
  grid-template-columns: 3;
}

<div class="exclusive-content">
  <a href="#"><img src="http://anti-naruto.ru/img/product-1-lg.jpg" alt="1"></a>
  <a href="#"><img src="http://anti-naruto.ru/img/product-2-sm.jpg" alt="2"></a>
  <a href="#"><img src="http://anti-naruto.ru/img/product-3-sm.jpg" alt="3"></a>
  <a href="#"><img src="http://anti-naruto.ru/img/product-4-sm.jpg" alt="4"></a>
  <a href="#"><img src="http://anti-naruto.ru/img/product-5-sm.jpg" alt="5"></a>
</div>