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)屬性

Tag/Grid專案(Grid item)屬性

->> 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]; /*可以只定義名稱,不定義大小*/

特殊內容介紹:

1. 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

2. 長度單位 fr
   "fr" 是 "fraction"("片段") 的縮寫, 可以用於指定寬度比例

   .container {
       display:grid;
       grid-template-columns: 200px 1fr 2fr;
   }
   

   fr 單位可以和絕對單位一起使用, 上面程式碼指定了第一行200px, 第二行寬度是第三行的一半

3. 用於控制大小的關鍵字

   • min-content 分配最小寬度
   • max-content 分配最大寬度
   • fit-content 分配的寬度在 min-content 和 max-content 之間
   • auto 自動分配寬度

4. 用於控制大小的函式
   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!!!