網格模板列不起作用

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-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屬性。

 .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-row: 1/3和grid-column: 2/3

參見我的JSBIN示例。 （如果您的第一個圖像更寬，則將適合整行...）