父元素容器設定柵格:
內部子元素會按順序從左往右依次排列在柵格內
宣告柵格容器
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>
"utf-8"
>
<
/title>
"stylesheet" href=
"./index.css"
>
.box
.box>div
div:first-child
<
/style>
<
/head>
='box'
>
1<
/div>
2<
/div>
3<
/div>
4<
/div>
1<
/div>
1<
/div>
1<
/div>
1<
/div>
1<
/div>
<
/div>
<
/body>
<
/html>
用css寫bootstrap柵格系統
grid 柵格布局 grid 網格 模組為 display 屬性提供了乙個新的值 grid。當你將任何元素的 display 屬性設定為 grid 時，那麼這個元素就是乙個 網格容器 grid container 它的所有直接子元素就成了 網格項 grid items 它將網頁劃分成乙個個網格，可以...
css筆記 bootstrap柵格系統布局原理
你們知道bootstrap柵格系統布局的原理嗎？今天突然被老大問了一下，有點記憶混淆了，特此記錄 如果你是第一次接觸bootstrap，你一定會為他的柵格化布局感到敬佩，他為我們提供了一套響應式的布局方案。簡單地講 1 bootstrap內建了一套響應式 移動裝置優先的流式柵格系統，隨著螢幕裝置或視...
css3 Grid柵格系統
coninater1.按百分比劃分.coninater2.按比例劃分.coninater3.自動填充.coninater4.minmax 控制行範圍的波動.coninater.coninater.container 左左右 container.contanier div first child 元素...