Title/ CSS Grid 佈局(Grid Layout)完全指南 #flight.Archives003
序 :
寫完這篇文章後,我準備一直做下去了,包括flight的各個分割槽,也看到前方的路.
我要做最簡約高效的前端教程 //表達最張狂的性格簡介(from Ruanyf) :
2017三月,主流瀏覽器更新了對Grid(網格佈局)的支援.
這是最強大的 CSS 佈局方案.
它將網頁劃分成一個個網格,做出各種各樣的佈局. 以前，只能通過複雜的 CSS 框架達到的效果，現在瀏覽器內建了.
Tag/Grid佈局介紹
.container{
display:grid; /*or inline-grid*/
}
這段程式碼定義了.container元素為Grid容器,.container的直接子元素為Grid專案
其中網格的分界線稱作Grid Line,兩條相鄰網格線之間的間隔稱作Grid Track.
單個格子稱作Grid Cell,多條網格線包圍的區塊稱作Grid Area
Tag/Grid容器(Grid Container)屬性
| 屬性 | 可取值 | 作用 |
|---|---|---|
display |
grid, inline-grid |
指定一個塊狀/行內Grid容器 |
grid-template-columns, grid-template-rows |
多個值, [line-name] <track-size>...(網格線的名稱,間隔的寬度) |
指定每個行/列的名稱和大小, 詳見Details |
grid-template-areas |
多個值, <grid-area-name>(區塊的名稱) 或 .(空的區塊) |
指定每一個區塊的名稱, 詳見Details |
grid-template |
<grid-template-rows> <grid-template-columns> |
對於 <grid-template-rows>, <grid-template-columns> 和 <grid-template-areas>的CSS簡寫屬性 |
column-gap(前grid-column-gap),row-gap(前grid-row-gap) |
<line-size>(網格線的寬度) |
指定行/列的間距 |
gap(前grid-gap) |
<grid-row-gap> <grid-column-gap> |
對於 row-gap和 column-gap的CSS簡寫屬性 |
align-items, justify-items |
start,end,center,stretch(預設值) |
align-items指定專案的行對齊方式, justify-items指定專案的列對齊方式 |
place-items |
<align-items> <justify-items> |
CSS簡寫屬性, 如果只有一個值則同時指定兩個屬性 |
justify-content,align-content |
start, end, center, stretch, space-around, space-between, space-evenly |
justify-content指定專案在容器中的水平位置, align-content指定專案在容器中的垂直位置 |
place-content |
<align-content> <justify-content> |
CSS簡寫屬性, 如果只有一個值則同時指定兩個屬性 |
grid-auto-columns, grid-auto-rows |
多個值, <track-size> |
指定在有多餘區塊時瀏覽器自動建立的多餘網格的列寬和行高 |
grid-auto-flow |
row, column, row dense, column dense |
指定專案的放置順序,預設是 row 即"先行後列" |
grid |
<grid-template>, <'grid-template-rows'> [ auto-flow && dense? ] <'grid-auto-columns'>, [ auto-flow && dense? ] <'grid-auto-rows'>? <'grid-template-columns'> |
grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns 和 grid-auto-flow的CSS簡寫屬性, 詳見Details |
Tag/Grid專案(Grid item)屬性
| 屬性 | 可取值 | 作用 |
|---|---|---|
grid-column-start, grid-column-end, grid-row-start, grid-row-end |
<line>, span <number>, span <name> |
指定專案所佔的Grid Area, 詳見Details |
grid-column, grid-row |
<start-line> / <end-line> |
grid-column是 grid-column-start和 grid-column-end的CSS簡寫屬性, grid-row是 grid-row-start和 grid-row-end的CSS簡寫屬性 |
grid-area |
<name>, <row-start> / <column-start> / <row-end> / <column-end> |
指定專案所在區域 |
justify-self,align-self |
start,end,center,stretch |
justify-self指定專案在區塊中的水平位置, align-self指定專案在區塊中的垂直位置, |
place-self |
auto(預設值), <align-self> <justify-self> |
<align-self>, <justify-self> 的CSS簡寫屬性, 如果只有一個值則同時指定兩個屬性 |
->> Details
容器屬性 - grid-template-columns, grid-template-rows
可取值:
grid-template-columns: 100px 1fr; /*區塊的大小*/
grid-template-columns: [linename] 100px; /*方括號內可以定義網格線的名稱, 方便以後引用*/
grid-template-columns: [linenameA linenameB] 100px; /*一條線可以有多個名字*/
grid-template-columns: [linenameA linenameB]; /*可以只定義名稱,不定義大小*/
特殊內容介紹:
repeat() 函式
CSS函式 repeat(times, value) 可以簡化重複值輸入的繁瑣
.container {
display: grid;
grid-template-columns: repeat(4, 25%); /*等同於 grid-template-columns: 25% 25% 25% 25%;*/
grid-template-rows: repeat(2, 50px 100px 80px); /*等同於 grid-template-columns: 50px 100px 80px 50px 100px 80px;*/
}
特殊說明:
times引數接受auto-fill和auto-fit關鍵字, 適用於容器大小不固定的情況grid-template-columns: repeat(auto-fill, 100px) /*在一行內不斷放置100px的專案直到填滿該行*/
auto-fill表示自動判斷重複次數以在每一行/列填充儘可能多的專案auto-fit表示自動判斷重複次數以在每一行/列填充儘可能多的空間
在含有minmax()函式等可變因素的情況下, 二者可能會產生不同表現
二者對比: https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/
Demo: https://codepen.io/flightmakers/pen/GRmLKyZ?editors=0100
長度單位
fr
"fr" 是 "fraction"("片段") 的縮寫, 可以用於指定寬度比例.container {
display:grid;
grid-template-columns: 200px 1fr 2fr;
}
fr單位可以和絕對單位一起使用, 上面程式碼指定了第一行200px, 第二行寬度是第三行的一半用於控制大小的關鍵字
min-content分配最小寬度max-content分配最大寬度fit-content分配的寬度在min-content和max-content之間auto自動分配寬度
用於控制大小的函式
minmax(min,max)接受兩個引數, 表示一個長度範圍, 表示寬度不小於min不超過max.
如果只定義其一, 可以使用min()和max()函式
容器屬性 - grid-template-areas
可取值:
/*<string>+*/
grid-template-areas:
"a a a"
"b c c"; /*劃分出6個區塊, 然後將其命名為 `a`, `b` 和 `c` 的3個區域*/
grid-template-areas:
"a a ."
"b c c"; /* . 可以將某個區塊指定為空*/
專案屬性 - grid
可取值:
/*<'grid-template'> (grid-template-columns 和 grid-template-rows) */
grid: "a" 100px "b" 1fr;
grid: [linename1] "a" 100px [linename2];
grid: "a" 200px "b" min-content;
grid: "a" minmax(100px, max-content) "b" 20%;
/* <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'> */
grid: 200px / auto-flow;
grid: 30% / auto-flow dense;
grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;
/* [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>*/
grid: auto-flow / 200px;
grid: auto-flow dense / 30%;
grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
這個屬性對程式碼的易讀性存在負面影響QwQ...
->> Reference link
MDN中文文件 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout
MDN 英文文件 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
CodingStartUp https://www.bilibili.com/video/BV1XE41177oN?from=search&seid=7045917601727025410
CSS-Tricks https://css-tricks.com/snippets/css/complete-guide-grid/
關於auto-fill和auto-fit屬性的對比 https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/Scotch.io#1 https://scotch.io/tutorials/deep-dive-into-css-grid-2
Scotch.io#2 https://scotch.io/tutorials/getting-started-with-css-grid-layout
->> Version History
現在版本為V1.0
詳見 Github(@flightmakers)2021.8.13 在jj釋出V1.0
2021.8.14 奮(mo)戰(yu)了兩天!!! 這篇文章終於釋出了QwQ!!!