grid-template-columns is not working

Ask Time：2018-01-18T04:51:36 Author：Maxim Yazykov

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:

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

Author:Maxim Yazykov，eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/48309790/grid-template-columns-is-not-working

sol :

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.\n\nFor direct child elements of the grid, use grid-column and grid-row.\n\n\r\n\r\n.exclusive-content {\r\n display: grid;\r\n grid: 270px 270px / repeat(4, 270px);\r\n justify-content: center;\r\n grid-gap: 30px;\r\n margin-top: 120px;\r\n}\r\n\r\n.exclusive-content img {\r\n background-size: cover;\r\n background-position: center;\r\n}\r\n\r\n.exclusive-content a:first-child {\r\n width: 540px;\r\n height: 540px;\r\n grid-column: 1 / 3;\r\n grid-row: 1 / 3\r\n}\r\n\r\n.exclusive-content a:nth-child(2) {\r\n grid-template-columns: 3;\r\n}\r\n<div class=\"exclusive-content\">\r\n <a href=\"#\"><img src=\"http://anti-naruto.ru/img/product-1-lg.jpg\" alt=\"1\"></a>\r\n <a href=\"#\"><img src=\"http://anti-naruto.ru/img/product-2-sm.jpg\" alt=\"2\"></a>\r\n <a href=\"#\"><img src=\"http://anti-naruto.ru/img/product-3-sm.jpg\" alt=\"3\"></a>\r\n <a href=\"#\"><img src=\"http://anti-naruto.ru/img/product-4-sm.jpg\" alt=\"4\"></a>\r\n <a href=\"#\"><img src=\"http://anti-naruto.ru/img/product-5-sm.jpg\" alt=\"5\"></a>\r\n</div>",

2018-01-17T21:01:31

Michael Benjamin :

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).\n\nInstead use the grid-column and grid-row properties, which apply to grid items.\n\n\r\n\r\n.exclusive-content {\r\n display: grid;\r\n grid: 270px 270px / repeat(4, 270px);\r\n justify-content: center;\r\n grid-gap: 30px;\r\n margin-top: 120px;\r\n}\r\n\r\n.exclusive-content img {\r\n /* background-size: cover; (applies only to background images; not what you have) */\r\n /* background-position: center; (same as above; does nothing here) */\r\n width: 100%; /* new */\r\n}\r\n\r\n.exclusive-content a:first-child {\r\n /* width: 540px; (not necessary; size controlled at grid container level) */\r\n /* height: 540px; (same as above) */\r\n grid-column: 1 / 3; /* adjustment */\r\n grid-row: 1 / 3; /* adjustment */\r\n}\r\n\r\n.exclusive-content a:nth-child(2) {\r\n grid-column: 3; /* adjustment */\r\n}\r\n<div class=\"exclusive-content\">\r\n <a href=\"#\"><img src=\"http://anti-naruto.ru/img/product-1-lg.jpg\" alt=\"1\"></a>\r\n <a href=\"#\"><img src=\"http://anti-naruto.ru/img/product-2-sm.jpg\" alt=\"2\"></a>\r\n <a href=\"#\"><img src=\"http://anti-naruto.ru/img/product-3-sm.jpg\" alt=\"3\"></a>\r\n <a href=\"#\"><img src=\"http://anti-naruto.ru/img/product-4-sm.jpg\" alt=\"4\"></a>\r\n <a href=\"#\"><img src=\"http://anti-naruto.ru/img/product-5-sm.jpg\" alt=\"5\"></a>\r\n</div>",

2018-01-17T21:05:43

grid-template-columns is not working

grid-template-columns not working in grids