雖然Flexbox 無法容納所有行中的等高行,但CSS Grid 提供了一種解決方案。透過利用 fr 單元,您可以毫不費力地實現這種效果。
在 CSS 網格佈局中,fr 單元表示靈活的長度,可以在網格容器內分配可用空間。將所有行設為 1fr 會轉換為等高行。
但是,神奇之處在於 fr 的定義。如果網格容器的高度不確定,fr 軌道(在本例中為行)會適應其內容的高度。
網格中最高的內容決定最大內容高度,即 1fr 的長度。因此,1fr 透過鏡像網格中最高「單元格」的高度來自動建立等高行。
Flexbox,雖然對於同一行上的等高行很有用,在多條線上猶豫不決。根據 Flexbox 規範,每行的高度僅足以容納該行上的 Flex 項目。此限制可防止行間高度相同。
以上是CSS 網格如何在 Flexbox 失敗的情況下實現等高行?的詳細內容。更多資訊請關注PHP中文網其他相關文章!