//設定為grid布局
display: grid;
//網格高寬
grid-template-columns: px | % | 1fr (佔剩餘空間份數) | minmax(不小於，不大於) | repeat( 重複的次數 | auto-fill (自動填充) , px | % ) | auto; // 每一列的列寬(多個值)
grid-template-rows: px | % | 1fr (佔剩餘空間份數) | minmax(不小於，不大於) | repeat( 重複的次數 | auto-fill (自動填充) , px | % ) | auto; // 每一行的行高(多個值)
//網格間距
row-gap: 20px; // 行間距
column-gap: 20px; // 列間距
gap: 20px 20px; // 簡寫(省略了第二個值，第二個值等於第乙個值)
//區域名稱
grid-template-areas: "header header header" // 區域布局，區域不需要使用" . "表示
"main main sidebar"
"footer footer footer";
//網格使用順序
grid-auto-flow: column | row | row dense | column dense; // 列 | 行 | 先行後列(盡可能填滿) | 先列後行(盡可能填滿)
//單元格內容位置
justify-items: start | end | center | stretch; // 左 | 中 | 右 | 預設
align-items: start | end | center | stretch; // 上 | 中 | 下 | 預設
place-items: start end; // 簡寫(省略了第二個值，第二個值等於第乙個值)
//整個內容區域位置
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
place-content: space-around space-evenly; // 簡寫(省略了第二個值，第二個值等於第乙個值)
//專案屬性：
//所在網格線
grid-column-start: 2 | header-start | span 1; // 左邊框: 為第幾個邊框 | 邊框名稱 | 跨越多少個網格
grid-column-end: 4 | header-end; // 右邊框: 為第幾個邊框 | 邊框名稱
grid-column: 2 / 4; // 簡寫
grid-row-start: 1 | header-start | span 2; // 上邊框: 為第幾個邊框 | 邊框名稱 | 跨越多少個網格
grid-row-end: 2 | header-end; // 下邊框: 為第幾個邊框 | 邊框名稱
grid-row: 1 / 2; // 簡寫
//所在區域
grid-area: header | 1 / 2 / 2 / 4; // 區域名 | 區域網格線
//專案內容位置
justify-self: start | end | center | stretch;// 左 | 中 | 右 | 預設
align-self: start | end | center | stretch;// 上 | 中 | 下 | 預設
place-self: start end;// 簡寫(省略了第二個值，第二個值等於第乙個值)
CSS Grid 網格 布局
grid template columns grid template rows grid template areas grid template grid column gap grid row gap grid gap justify items align items justify con...
CSS Grid 網格布局
css grid是乙個強大的 web 二維布局工具，能夠以行和列來進行布局 通過設定display的屬性為grid或inline grid來建立網格容器 display grid 預設行排列，寬度為容器的寬度 container複製 圖1 1.png display inline grid cont...
CSS Grid 網格布局
概念 grid布局又稱css網格布局，又名 網格 是乙個二維的基於網格的布局系統，其目的只在於完全改變我們設計基於網格的使用者介面的方式 和grid template columns一起，單位統一 a.fr單位 b.repeat 方法 注 網格中提供了乙個新的單位 fr 比例單位 寫法 例子 12 ...