CODEWITHSUNDEEP
htmlcssgrid-layoutcss-grid
Maxim Yazykov
Maxim Yazykov

Reputation: 73

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>

Upvotes: 3

Views: 55061

Answers (3)

Akin Hwan
Akin Hwan

Reputation: 627

...see here MDN CSS grid-template-columns

the container in which you are defining the rows and columns are written like this grid-template- : 30% 70% (variety of different ways you can define) then on the actual cell you define which row and column it sits in grid-row: 1/3 and grid-column: 2/3

See my JSBIN example. (If your first image was wider it would fit the entire row...)

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 371271

The problem is that you are applying the grid-template-columns property to grid items. This is a grid container property. It will be ignored on grid items (unless they are also grid containers).

Instead use the grid-column and grid-row properties, which apply to grid items.

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

Upvotes: 3

sol
sol

Reputation: 22949

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>

Upvotes: 3

Related Questions