使用CSS網格創建佈局

> CSS網格：現代Web Design的強大佈局工具

tiffany's CSS Master的摘錄，第二版，提供了CSS Grid的簡明介紹，CSS Grid是2017年10月引入的革命性佈局系統。網格簡化了以前需要廣泛的DOM操作的複雜佈局的創建。 雖然詳細介紹了規範，但此概述涵蓋了關鍵概念，並指出了進一步的深入學習資源。

密鑰概念：

> CSS網格可以創建先前具有挑戰性或無法實現的複雜佈局。 它在2017年10月獲得了廣泛的瀏覽器支持。
>將
• 應用於元素建立網格格式的上下文，將元素轉換為塊級容器及其子女，將其轉換為排列的網格項目。 display: grid>
> and
• 屬性使用空間分隔grid-template-rows軌道列表grid-template-columns（例如，長度，百分比，>，，auto，min-content 🎜>） 。 max-content
>隱式網格自動處理超過明確定義的單元格的網格項目，根據內容默認為自動大小。
• 速記結合了行和列定義。 grid-template>函數簡化了重複列或行，而repeat()>和auto-fit>動態調整列/行計數。 auto-fill。

網格格式上下文：>

觸發與這些效果的網格格式上下文： display: grid

該元素成為塊級元素。 >

兒童元素（或文本節點）變成類似塊狀的網格項目。
1. 在水平寫作模式中，除非明確設置，否則行高度與最高的項目匹配；垂直寫作模式使用最長的項目的長度。

>

的行為相似，但是容器仍然是內聯級別的。 >

display: inline-grid

定義網格佈局：> 定義網格容器後，使用

和

指定行和列計數。 這些接受A曲目列表，一個定義每個行或列位置的網格線名稱和大小的空間分隔字符串。

>

grid-template-rows顯式與隱式網格：grid-template-columns>

AN顯式網格定義了所有單元。 AN隱式網格擴展網格，以適應明確定義的單元格之外的其他項目。 隱式網格項目自動大小，擴展以適合內容或填充剩餘空間。 隱式網格項目的grid-auto-rows和grid-auto-columns控制默認大小，但是使用minmax()>防止內容溢出。

>

>帶有Flex單元（fr）的柔性網格：>

flex單位（）fr表示可用空間的分數，提供比例尺寸。 它們是比率，而不是絕對長度，並且與其他長度單位或>。 calc()

shorthand：> grid-template屬性結合了

和

grid-template grid-template-rows grid-template-columns

>

重複行和列（）：repeat()>

函數簡化了創建重複模式：。

>和repeat()根據可用空間動態調整重複數量。 repeat(number, track list)調整軌道尺寸； auto-fit添加匿名曲目。 auto-fill auto-fitauto-fill

進一步的學習：

這是一個基本介紹；大量資源提供了更多詳細的信息，包括CSS網格規範本身，Rachel Andrew's網格，例如>

，Jen Simmons的實驗佈局實驗室和佈局Land YouTube頻道以及CSS-Tricks的“完整指南”。 “

結論：

> CSS網格是一個強大的工具。 此概述為進一步探索其功能提供了基礎。

以上是使用CSS網格創建佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！