父元素容器設置柵格:
內部子元素會按順序從左往右依次排列在柵格內
聲明柵格容器
display: grid; 父元素得有高寬
display:inline-grid; 行內柵格
繪製每格
方式一(手動設置):
grid-template-rows:npx npx npx ...; 設置行方向每格高度:
grid-template-columns:npx npx npx ...; 設置列方向每格寬度:
方式二(重複設置):
grid-template-rows:repeat(格數,每格大小);
grid-template-rows:repeat(格數,大小1 大小2); 繪製 格數*2個的每兩個高度分別爲大小1,大小2的格子
方式三(設置大小自動填充格子格數):
grid-template-rows:repeat(auto-fill,每格大小)
方式四(每格按份設置,自動填充格子高寬)
grid-template-rows:repeat(格數,1fr); 類似flex:1
方式五(控制每格波動範圍)
grid-template-rows:repeat(格數,minmax(npx,n1px); 設置後,當父元素容器變化時,每行高度會在這個範圍內波動,最少爲npx,最大爲n1px,之間會自動填充高度
柵格間距
row-gap:npx;
column-gap:npx;
gap:行間距 列間距
有內容的柵格自動填滿空的柵格:
grid-auto-flow:row dense
設置柵格整體對齊方式(非柵格內容,及當每行/每列柵格的高/寬小於父容器高/寬,生效)---即柵格在水平/豎直方向未撐滿父元素
水平:justify-content:start/end/center/space-around/stretch/...
豎直:align-content:start/end/center/space-around/...
簡寫:place-content:豎直對齊方式 水平對齊方式;
設置柵格內的內容對齊方式(即當每行/每列柵格的柵格等於父元素高/寬時生效)---即柵格在水平/豎直方向撐滿父元素
水平:justify-items:start/end/center/space-around/stretch/...; 子元素內容會在所在柵格內對齊
豎直:align-items:start/end/center/space-around/...;
簡寫:place-item:豎直對齊方式 水平對齊方式;
設置單個柵格內的內容對齊方式
子元素選擇器中
水平:justify-self:justify-content:start/end/center/space-around/stretch/...
豎直:align-self:justify-content:start/end/center/space-around/stretch/...
簡寫:place-self:豎直對齊方式 水平對齊方式;
子元素設置
**線指定佔據柵格**
方式一(根據線來指定) 如3*3的格子,n爲1表示第一行/列的線,n爲4表示最後一列/最後一行
grid-row-start:n; 從第n行的線開始
grid-row-end:n; 到第n行的線結束
grid-column-start:n; 從第n列的線開始
grid-column-end: n; 到第n列的線結束
方式二(指定線名)
在父元素畫格子時指定
grid-template-rows:[第一行開始名]npx[第一行結束名 第二行開始名] npx[第二行結束名 第三行開始名] npx ...;
子元素指定柵格:
grid-row-start:行名稱; 從第n行的線開始
grid-row-end:行名稱; 到第n行的線結束
grid-column-start:列名稱; 從第n列的線開始
grid-column-end: 列名稱; 到第n列的線結束
方式三(重複命名)
在父元素畫格子時指定
grid-template-rows:repeat(格數,[ 行開始名稱]大小[ 行結束名稱 ])
子元素指定柵格
grid-row-start:行開始名稱 n; 從第n行的線開始
grid-row-end:行結束名稱 n; 到第n行的線結束
grid-column-start:列開始名稱 n; 從第n列的線開始
grid-column-end: 列結束名稱 n; 到第n列的線結束
方式四(偏移量)
grid-row-start:n; 從第n行的線開始
grid-row-end: span n; 從第n行開始,偏移n個，不指定開始線,默認從1開始偏移
grid-column-start:n; 從第n列的線開始
grid-column-end: span n; 從第n列開始,偏移n個，不指定開始線,默認從1開始偏移
方式五(簡寫)----推薦----
支持名稱和數字
grid-row:n/n; 從第n行的線開始到第n行結束
grid-column: n/n; 到第n列的線結束到第n列結束
grid-row:n/span n; 從第n行的線開始,水平偏移n個
**區域指定佔據柵格**
方式一(指定線)
grid-area:行開始線n/列開始線n/行結束線n/列結束線n
方式二(指定線名)
在父元素畫格子時指定
grid-template-rows:repeat(格數,[ 行名稱]大小)
子元素指定柵格
grid-area:行名稱 開始n/列名稱 開始n/行名稱 結束n/列名稱 結束n
方式三(指定區域名)
在父元素畫柵格結束後
grid-template-areas:"名稱1 名稱2 " "名稱3 名稱4"
" "內的名稱分別代表水平方向的格子,另一行的格子在後面的" "內,若一行內的名稱相同,則同一個名字代表所在的多個格子
子元素
子元素的容器標籤可以換成所定義的名稱,在子元素的選擇器中
grid-area:名稱; 及代表子元素所佔的柵格爲指定名稱的柵格
方式四(指定區域名後再使用線):
在父元素畫柵格結束後
grid-template-areas:"名稱1 名稱2 " "名稱3 名稱4"
子元素指定佔據柵格
grid-area:對應名稱-start/對面名稱-statr/對應名稱-end/對應名稱-end
分別爲:對應名稱的柵格的行起始線/對應名稱的柵格的列起始線/對應名稱的柵格的行結束線/對應名稱的柵格的列結束線
方式五(佔位符指定局部區域名,控制部分柵格)
在父元素畫柵格結束後
grid-template-areas:". . " "名稱3 名稱4"; 一個'.'點就代表佔位一個柵格
子元素就可使用名稱佔據需要的柵格
在子元素的選擇器中:grid-area:名稱;
代碼示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./index.css">
<style>
.box{
width: 300px;
height: 300px;
border: solid 1px red;
display: grid;
row-gap: 10px;
column-gap: 10px;
/* grid-template-rows:repeat(3,1fr); */
grid-template-rows: repeat(3,100px);
/* grid-template-rows:100px 100px 100px; */
grid-template-columns: repeat(3,100px);
/* grid-template-columns: 100px 100px 100px; */
}
.box>div{
/* width: 100px;
height: 100px; */
background-color: blueviolet;
border: solid 1px blueviolet;
background-clip: content-box;
padding: 10px;
box-sizing: border-box;
}
div:first-child{
/* grid-row-start:1;
grid-row-end:2;
grid-column-start: 1;
grid-column-end: 4; */
grid-area:1/1/4/4
}
</style>
</head>
<body>
<div class='box'>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
</body>
</html>