實現垂直對齊（謝謝，subgrid！）

現代網絡設計工具已大大提高了垂直對齊功能。早期網站的佈局通常寬960px，使用12列網格嚴重依賴水平對齊。媒體查詢的出現在解決了許多問題的同時，引入了新的挑戰，尤其是在元素反思或重新定位時保持一致性。

考慮一個常見的情況：一個包含按鈕組的“欄”，每個都在<fieldset></fieldset>與<legend></legend>。在較大的屏幕上，對齊非常簡單。一種簡單的CSS方法，使用浮子處理，並在較小的斷點下提供響應迅速的行為：

 。
  寬度：48％；
  浮子：左；
  邊緣權利：1％；
}

/* 移動的 */
@Media僅屏幕和（最大寬度：480px）{
  。
    寬度：100％；
  }
}

但是，在較小的屏幕上，垂直錯位變得顯而易見。雖然固定寬度，但使用媒體查詢的基於像素的CSS解決方案可以強制對齊，但這種方法缺乏靈活性，並且依賴於與特定內容相關的“魔法數”：

 /* 移動的 */
@Media僅屏幕和（最大寬度：480px）{
  傳奇 {
    寬度：160px;
  }
  按鈕 {
    寬度：130px;
  }
}

這種不靈活的性能，再加上對媒體查詢的依賴（我的目的是最小化），因此需要一個更適合適應性的解決方案。理想的解決方案應允許按鈕和標籤響應：

1. 可用空間
2. 內容維度
3. 周圍元素

媒體查詢不足，因為他們不考慮周圍空間，如海頓·皮克林（Heydon Pickering）的“ flexbox holy baratross”所示。所需的行為是第二​​個<fieldset></fieldset>僅當兩個字段集不再適合單行時，才包裝。

Flexbox和網格：初始嘗試

Flexbox，其flex-wrap: wrap屬性，提供了提高的柔韌性，從而使元素可以流向多條線。但是，對於完美的垂直對齊，通常仍然需要一個min-width 。

CSS網格專為佈局管理而設計，為無媒體查詢的多線佈局提供了auto-fit和auto-fill關鍵字（在repeat()中）。使用auto-fit ，我們實現了：

 。
  顯示：網格；
  網格 - 板柱：重複（自動擬合，450px）;
  網格間隙：10px;
}

但是，最佳對齊仍然可能需要絕對寬度值。使用fr單元或minmax()靈活網格軌道可提供進一步的改進，但是出現限制，因為只有直接的網格容器的直接兒童才被視為網格項目。

亞網格解決方案

CSS網格級別2引入了subgrid ，從而使嵌套的網格從其父母那裡繼承了軌道尺寸。這解決了獨立嵌套網格的問題。子網格允許兒童網格中的元素響應兄弟姐妹網格中的內容。

對於我們的按鈕示例，使用auto-fill和minmax()定義父網格：

 。
  顯示：網格；
  網格 - 板柱：重複（自動填充，minmax（150px，1fr））;
  網格間隙：10px;
}

兒童網格使用subgrid繼承父母的列軌道：

 .sub-Grid {
  顯示：網格；
  網格列：跨度3；
  網格板柱：子格里德；
  準項目：中心；
}

這確保了一致的對齊和響應行為。按鈕和標籤適合可用空間，僅在必要時才包裹在新線路上。

瀏覽器兼容性和進一步閱讀

亞網格瀏覽器支持目前受到限制（主要是Firefox）。 CSS功能查詢可以為其他瀏覽器提供後備。有關詳細的瀏覽器兼容性信息，請參閱Caniuse.com。有關此主題的進一步閱讀包括Miriam Suzanne，Rachel Andrew和Heydon Pickering的文章（原始文章中提供的鏈接）。對於處理涉及形式元素，網格和flexbox的錯誤，可能需要在野外圍繞的包裝器。可以將FieldSet的display屬性設置為contents以解決此問題。

以上是實現垂直對齊（謝謝，subgrid！）的詳細內容。更多資訊請關注PHP中文網其他相關文章！