CSS 網格佈局中的等高行：詳細說明
與Flexbox 不同，Flexbox 的行高由所需的最小高度決定對於其元素，CSS網格佈局使開發人員能夠在整個頁面中實現等高的行grid.
網格佈局解決方案
實現等高的關鍵在於將網格容器的grid-auto-rows 屬性設定為1fr。 Fr 單元旨在分配容器中的可用空間，類似於 Flexbox 中的 flex-grow 屬性。
透過設定 grid-auto-rows: 1fr，網格內的所有行將具有相同的高度。這似乎違反直覺，因為 fr 應該動態分配空間。
理解Fr 單位
然而，CSS 網格規範揭示了一個關鍵的細微差別：在處理動態網格尺寸時、「網格軌道」（本例中為行）調整大小以適應其內容。然後，每行的高度會適應最高（最大內容）的網格項。
這些行的最大高度變為 1fr 的長度，隨後乘以每個網格軌道的彈性因子以確定其最終高度尺寸。這種機制確保所有行的高度相等。
為什麼 Flexbox 達不到
Flexbox 與 CSS 網格不同，無法促進多行的行高度相等。根據Flexbox 規範，Flex 專案只能在同一行內達到相同的高度：
「在多行Flex 容器中，每行的交叉大小是包含Flex 專案所需的最小大小線。」此規定可防止Flexbox 將行擴展至超出其最小高度。
以上是CSS Grid 與 Flexbox 不同，如何實現等高行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
