CSS網格中的可擴展部分

CSS網格是使用最小代碼創建響應式佈局的絕佳工具，通常會消除對媒體查詢的需求。我很樂意將其用於各種佈局，優先考慮乾淨的HTML。但是，最近的一個UI挑戰提出了一個獨特的問題：在單擊按鈕時將網格單元擴展到完全寬度，同時保持原始的網格結構和響應能力。

要求是擴展的細胞：

1. 出現在觸發單元格的正下方。
2. 佔據完整的網格寬度。

該解決方案令人驚訝地優雅，僅使用了幾行CSS網格。本文詳細介紹了三種簡單的CSS網格技術，可以在沒有JavaScript的情況下實現此目的。

問題：可擴展的產品卡

這是UI任務的簡化示例：我們的Storybook組件庫具有產品卡網格。每張卡都需要一個“快速查看”按鈕，以揭示帶有詳細產品信息的更大的全寬卡。這種擴展必須：

• 動態插入點擊卡下方的全寬卡。
• 保留原始的DOM順序和視覺網格佈置。
• 在瀏覽器調整大小上保持完全響應。

最初，我認為重新定位卡是必要的。在線搜索“快速查看”實現主要產生模式或覆蓋解決方案。模式對於集中內容很常見，但是我想要一個解決方案，該解決方案在網格中無縫集成。

該解決方案來自結合幾個功能強大的CSS網格功能。

CSS網格技巧1：自動擬合列

我現有的網格系統已經利用了此技術：

 。網格 {
  顯示：網格；
  差距：1REM；
  網格板柱：重複（自動擬合，20REM）；
}

grid-template-columns: repeat(auto-fit, 20rem);創建列（此處20REM寬），該列會自動調整為可用空間，並根據需要包裹到新行。薩拉·索伊丹（Sara Soueidan）對auto-fit與auto-fill的解釋非常出色。為簡單起見，我使用了固定的列寬度。

CSS網格技巧2：全寬跨度

為了容納擴展的卡：

 .fullwidth {
  網格列：1 / -1；
}

由於技巧1創建一個明確的網格， grid-column: 1 / -1;跨越整個寬度（從第1列到最後一列）。

但是，這留下了全寬卡上方的縫隙。

CSS網格技巧＃3：密集包裝

填補這些空白采用人造飾面方法：

 。網格 {
  Grid-auto-flow：密集；
}

grid-auto-flow: dense;優化自動置換，在網格早期填充空白。當：

• 所有列具有相同的寬度（或使用minmax()進行柔性寬度）。
• 一排中的所有單元格都具有相同的高度（默認； align-items: stretch隱式使單元格填充行高度）。

原始DOM訂單是保留的，對於可訪問性至關重要。 MDN提供了CSS電網自動置換的全面解釋。

完整的解決方案

這三種技術創建了一個簡單，高效的佈局，使用最小的CSS，無媒體查詢，並且沒有用於佈局計算的JavaScript。

JavaScript的角色

JavaScript仍然是必要的，但僅用於功能：管理點擊事件，聚焦並顯示注入的卡。在原型中，全寬卡是硬編碼的。 JavaScript切換其可見性。

在生產環境中，該卡可能會動態獲取並插入。為了避免腹脹，應將注入的內容視為漸進式增強。如果JavaScript失敗，則將用戶重定向到產品詳細信息頁面。

可訪問性注意事項

優先考慮語義HTML，ARIA屬性和鍵盤導航：

• 網格使用<ul>出於語義清晰。</ul>
• 產品卡是<li>具有正確標題的元素。</li> <li>自然標籤訂單保留DOM訂單。</li> <li>聚焦管理確保正確的鍵盤導航。 （進一步的改進可以包括注射卡的明確標籤， <kbd>cess</kbd>鍵綁定以關閉以及滾動滾動以確保可見性）。</li>

結論

這種方法為模態提供了一種干淨的替代方法，可以揭示其他內容而不遮蓋頁面。它對於各種情況（例如圖像標題或輔助文本）可能很有用，可能會替換<details>/<summary></summary></details>在某些情況下。我渴望聽到您的想法和替代方法。

以上是CSS網格中的可擴展部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！