CSS 網格如何在 Flexbox 失敗的情況下實現等高行？

CSS 網格佈局中的等高行：更好的方法

雖然Flexbox 無法容納所有行中的等高行，但CSS Grid 提供了一種解決方案。透過利用 fr 單元，您可以毫不費力地實現這種效果。

網格佈局魔法如何發生

在 CSS 網格佈局中，fr 單元表示靈活的長度，可以在網格容器內分配可用空間。將所有行設為 1fr 會轉換為等高行。

但是，神奇之處在於 fr 的定義。如果網格容器的高度不確定，fr 軌道（在本例中為行）會適應其內容的高度。

網格中最高的內容決定最大內容高度，即 1fr 的長度。因此，1fr 透過鏡像網格中最高「單元格」的高度來自動建立等高行。

為什麼 Flexbox 不足

Flexbox，雖然對於同一行上的等高行很有用，在多條線上猶豫不決。根據 Flexbox 規範，每行的高度僅足以容納該行上的 Flex 項目。此限制可防止行間高度相同。

以上是CSS 網格如何在 Flexbox 失敗的情況下實現等高行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！