grid-template-columns无效

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>

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>

Answer 2

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

而是使用适用于网格项的grid-column和grid-row属性。

＆＃13;

＆＃13;

.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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

...请参阅此处MDN CSS grid-template-columns

用于定义行和列的容器是这样写的 grid-template- : 30% 70% (variety of different ways you can define) 然后在实际单元格上定义它位于grid-row: 1/3和grid-column: 2/3

中的行和列

请参阅我的JSBIN示例。 （如果你的第一张图像更宽，它将适合整行......）