网格模板列不工作

Question

我有一个街区，display: grid。

按照思路，第一个元素应该拉长到2列2行，其他各占一个cell。

但是 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 and 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 and 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>

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 示例。（如果您的第一张图片更宽，它会适合整行...）

网格模板列不工作

grid-template-columns is not working

html

css

grid-layout

css-grid