將網格項目設置為相同的高度

Question

我對網格有一個非常具體的問題。 我試圖使所有網格項目的大小相同。 在這種情況下， stretch不是一個選項，因為一些項目跨越兩行。 當我添加align-items: center時，這並沒有解決問題。 我真的沒有找到任何可以幫助的東西。

 #cards { padding: 0 7vw; margin-top: 3vh; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); align-items: center; justify-content: center; }.card:nth-child(1), .card:nth-child(3) { grid-row: span 2; }.card { display: block; border: solid 5px #000; box-shadow: 0 20px 30px -15px hsl(215, 49%, 82%); border-radius: 8px; margin: 5%; overflow: hidden; text-align: center; }

 <div id="cards"> <div class="card"> <div class="card-content"> <h2 class="card-title">Item 1</h2> </div> </div> <div class="card"> <div class="card-content"> <h2 class="card-title">Item 2</h2> </div> </div> <div class="card"> <div class="card-content"> <h2 class="card-title">Item 3</h2> <p>Hello world</p> </div> </div> <div class="card"> <div class="card-content"> <h2 class="card-title">Item 4</h2> <p>I built this two line paragraph oh yes I really want it to be two lines or yes finally.</p> </div> </div> </div>

非常感謝您的想法。 （我是 Stack Overflow 上的新手，所以請隨時提供任何其他建議來幫助我進一步改進問題）

Answer 1

您可以像這樣添加更多行：

grid-template: ".   two   ." 1fr
               "one two  three" 1fr
               "one four three" 1fr
               ".   four  ." 1fr / 
               1fr  1fr  1fr;

在兒童上使用適當的grid-area 。

這是片段（我還添加了一個height: 90%;在孩子身上，以使它們適合單元格高度但保持邊距）：

 #cards { padding: 0 7vw; margin-top: 3vh; display: grid; grid-template: ". two." 1fr "one two three" 1fr "one four three" 1fr ". four." 1fr / 1fr 1fr 1fr; align-items: center; justify-content: center; }.card:nth-child(1){ grid-area: one; }.card:nth-child(2){ grid-area: two; }.card:nth-child(3){ grid-area: three; }.card:nth-child(4){ grid-area: four; }.card { display: block; border: solid 5px #000; box-shadow: 0 20px 30px -15px hsl(215, 49%, 82%); border-radius: 8px; margin: 5%; overflow: hidden; text-align: center; height: 90%; }

 <div id="cards"> <div class="card"> <div class="card-content"> <h2 class="card-title">Item 1</h2> </div> </div> <div class="card"> <div class="card-content"> <h2 class="card-title">Item 2</h2> </div> </div> <div class="card"> <div class="card-content"> <h2 class="card-title">Item 3</h2> <p>Hello world</p> </div> </div> <div class="card"> <div class="card-content"> <h2 class="card-title">Item 4</h2> <p>I built this two line paragraph oh yes I really want it to be two lines or yes finally.</p> </div> </div> </div>

Answer 2

試試這個：我嘗試了很多單位，當 % 工作時，我只是使用它

 #cards { padding: 0 7vw; margin-top: 3vh; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); align-items: center; justify-content: center; }.card:nth-child(1), .card:nth-child(3) { grid-row: span 2; }.card { display: block; border: solid 5px #000; box-shadow: 0 20px 30px -15px hsl(215, 49%, 82%); border-radius: 8px; margin: 5%; overflow: hidden; text-align: center; height: 90%; }.card:nth-child(1), .card:nth-child(3) { height: 45%; }

 <div id="cards"> <div class="card"> <div class="card-content"> <h2 class="card-title">Item 1</h2> </div> </div> <div class="card"> <div class="card-content"> <h2 class="card-title">Item 2</h2> </div> </div> <div class="card"> <div class="card-content"> <h2 class="card-title">Item 3</h2> <p>Hello world</p> </div> </div> <div class="card"> <div class="card-content"> <h2 class="card-title">Item 4</h2> <p>I built this two line paragraph oh yes I really want it to be two lines or yes finally.</p> </div> </div> </div>