网格模板列不工作

Question

我有一个街区 display: grid 。

按照思路，第一个元素应该拉伸成2列2行，其他元素各占一个单元格。

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

现在第一个元素只进入第一个单元格，超出范围，但没有在两列和两行上拉伸。

我的问题在哪里？

我需要的：

 .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>

原文由 Maxim Yazykov 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 sol 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

问题是您正在将 grid-template-columns 属性应用于网格项。这是一个网格容器属性。它将在网格项目上被忽略（除非它们也是网格容器）。

而是使用适用于网格项的 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; (applies only to background images; not what you have) */
  /* background-position: center; (same as above; does nothing here) */
  width: 100%; /* new */
}

.exclusive-content a:first-child {
  /* width: 540px; (not necessary; size controlled at grid container level)  */
  /* height: 540px; (same as above) */
  grid-column: 1 / 3; /* adjustment */
  grid-row: 1 / 3;    /* adjustment */
}

.exclusive-content a:nth-child(2) {
  grid-column: 3;     /* adjustment */
}

 <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>

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议