我可以在CSS網格中每行有不同數量的列嗎？

.grid { 
 
    display: grid; 
 
    grid-template-columns: repeat(3, 1fr); 
 
    grid-template-rows: 100px; 
 
    grid-auto-rows: 60px; 
 
    grid-gap: 15px; 
 
} 
 

 
.col { 
 
    background-color: tomato; 
 
}

<div class="grid"> 
 
    <div class="col"></div> 
 
    <div class="col"></div> 
 
    <div class="col"></div> 
 
    <div class="col"></div> 
 
    <div class="col"></div> 
 
</div>

這產生2行，第一個是100px的高度，第二個是60px高度自動創建的。第二排的2列寬度爲1fr。

這是可能通過CSS網格/ Flexbox水平居中在第2行的2列？即每行有不同數量的列。

我被困在試圖爲瀏覽器中的CSS網格框架解決一個微不足道的用例。如果您使用Flexbox構建網格，這是非常不成問題的。

但我可以用CSS Grid來實現嗎？

這是我想要實現的CodePen demo。

來源

2017-12-03 knitevision

一格，顧名思義，具有相同數量的每行的列。您需要flexbox，而不是網格。 – jhpratt

這樣的東西可能是有用的：https：//stackoverflow.com/questions/43962217/centering-columns-in-css-grid – instead

如果您的行具有不同數量的單元格，而這些單元格並非都佈置在單個二維（行和列）空間上，則您沒有網格。根據定義，網格包含固定數量的行和列，以及跨越一個或多個的單元格。

（也許你就會有多種異構網格，每行一個，但只是違背了電網的整點，真的。）

來源

2017-12-03 00:34:55 BoltClock

哦，這是一個無賴，是啊，我的問題甚至沒有在這個框架內有意義。謝謝 – knitevision

@knitevision也許作爲一個附註，你可以將'grid-template-rows'設置爲'auto'來在列中放置不同數量的框。但是你不能像你的例子那樣將第二行盒子居中。 CSS網格相當「僵化」。 – lynx

你總是可以試試這樣：

CSS

body { 
    margin: 2% 35%; 
} 
.container { 
    display: grid; 
    grid-gap: 10px; 
    grid-template-columns: [col] 100px [col] 100px [col] 100px [col] 100px ; 
    grid-template-rows: [row] auto [row] auto [row] ; 
    background-color: #fff; 
    color: #444; 
} 
.col { 
    background-color: #444; 
    color: #fff; 
    border-radius: 5px; 
    padding: 20px; 
    font-size: 150%; 

} 
.a { 
    grid-column: col/span 2; 
    grid-row: row ; 
} 
.b { 
    grid-column: col 3/span 2 ; 
    grid-row: row ; 
} 
.c { 
    grid-column: col ; 
    grid-row: row 2 ; 
} 
.d { 
    grid-column: col 2/span 3 ; 
    grid-row: row 2 ; 
} 
.e { 
    grid-column: col/span 4; 
    grid-row: row 3; 
}

HTML

<div class="container"> 
    <div class="col a">A</div> 
    <div class="col b">B</div> 
    <div class="col c">C</div> 
    <div class="col d">D</div> 
    <div class="col e">E</div> 
</div>

個

CodePen：https://codepen.io/anon/pen/MOLrvq

來源

2017-12-03 00:38:14 Alina

你問這個：

我可以在一個CSS網格不同數量的每行的列嗎？

但後來你說這樣的：

通過CSS網格/ Flexbox的這是可能的水平中心於第2行2列？

它看起來就像你被困在一個經典XY Problem：你專注於你的嘗試性解決方案而不是你實際問題。

是的，可以將列（以及網格項和內容）置於CSS網格中。（請參閱此處的各種方法：Centering in CSS Grid）

不，不可能在CSS網格或任何網格中爲此問題設置不同數量的列。否則，你沒有網格。

由於外觀通常在佈局中很重要，因此可以使用CSS網格在第一行中創建類似於三個「列」的東西，並在第二行–中居中–構建兩個「列」。

在我下面的例子中，我將網格容器中的水平空間劃分爲12列。然後，我使用Grid的line-based placement功能定位和調整項目大小。

.grid { 
 
    display: grid; 
 
    grid-template-columns: repeat(12, 1fr); 
 
    grid-auto-rows: 40px; 
 
    grid-gap: 10px; 
 
} 
 

 
.col:nth-child(-1n + 3) { 
 
    grid-column: span 4; 
 
} 
 
.col:nth-last-child(2) { 
 
    grid-row-start: 2; 
 
    grid-column: 3/span 4; 
 
} 
 
.col:nth-last-child(1) { 
 
    grid-row-start: 2; 
 
    grid-column: 7/span 4; 
 
} 
 
.col { 
 
    background-color: tomato; 
 
}

<div class="grid"> 
 
    <div class="col"></div> 
 
    <div class="col"></div> 
 
    <div class="col"></div> 
 
    <div class="col"></div> 
 
    <div class="col"></div> 
 
</div>

codepen demo

下面是它看起來像使用Firefox DevTools：

來源

2017-12-03 01:17:26

我可以在CSS網格中每行有不同數量的列嗎？

回答

相關問題