Search code examples
htmlcssgrid-layoutcss-grid

grid-template-columns is not working

I have one block, display: grid.

According to the idea, the first element should be stretched to 2 columns and 2 rows, the others occupy one cell each.

But the grid-template-columns property does not work for me, whatever value I put there, the content does not move.

Now the first element got into the first cell only, got out of bounds, but did not stretch on two columns and two rows.

Where is my issue?

What I need:

picture

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

Solution

  • You have used grid-template-columns and grid-template-rows properties on the child of the grid. These properties are used with display: grid on the container.

    For direct child elements of the grid, use 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>