【CSS】 Grid 柵格佈局

2018年作爲Grid佈局的元年，Grid給開發者帶來了強大的佈局體驗，它能幫助我們在頁面上創建響應式佈局。目前已有77%+的瀏覽器支持這個特性，比例還在逐步增加。

要點：

Grid

Grid Container

使用display:grid或display:inline-grid即可創建一個柵格容器，這個容器下的所有直接子節點都會成爲柵格項（Grid Item）。

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

//base css
.item {padding: 10px;border:1px solid #fff;text-align: center;color:#fff;background-color: #d426ff;}
// grid css
.container {
    display:grid;//如圖1
}
// or
.container {
    display:inline-grid;//如圖2
}

圖1

圖2

Explicit Grid

我們可以通過設置grid-template-columns和grid-template-rows來顯示地設置柵格的列和行的值。

.container {
    grid-template-rows: 50px 100px;
}

即：爲每行指定一個高度值。單位可以是 px,%,em等，例如上面中，第一行和第二行的固定高度爲50px 和 100px。而其餘行的高度將有該行自身包含的內容來確定。如下圖：

類似的，grid-template-columns能確定每列的寬度值。

.container {
    grid-template-rows: 50px 100px;
    grid-template-columns: 90px 50px 120px 30px;
}

如下圖：設置每列的寬度分別爲90px 50px 120px 30px：

當然，你還可以設置基礎響應單位:fraction(fr)：fr允許你將容器拆分爲多個塊：

.container {
    grid-template-columns: 1fr 1fr 1fr 1fr;//四等分，每列佔據一等分
}

.container {
    grid-template-columns: 3rem 25% 1fr 1fr;//3rem和25%設置第1列和第2列，fr 則基於剩餘空間計算：1fr = ((width of grid)-(3rem)-(25% of width of grid))/3
}

Minimum and Maximum Grid Track Sizes

可以使用minmax()函數定義柵格項的最小/最大尺寸。

minmax(param1,param2)：param1表示最小尺寸；param2表示最大尺寸。除了設置具體單位值，也可以設置爲auto，這時，會基於柵格項的內容來定義柵格項的尺寸。
```
.container {
    grid-template-rows: minmax(100px,auto);
    grid-template-columns: minmax(auto,50%) 1fr 1fr 3em;
}
```

上面代碼表示：柵格項行的最小高度爲100px,最大高度爲auto,即允許根據內容大小增加尺寸，

另一方面，柵格項列的最小寬度爲auto，但最大寬度爲50%，即不能超過容器寬度的50%。

Repeating Grid Tracks

使用repeat()方法能定義重複的柵格項。對於具有相同尺寸的柵格項很有用。

repeat(param1,param2)：param1表示定義多少個柵格項重複；param2表示對柵格項寬/高的定義。

.container {
    grid-template-rows: repeat(4,100px);//定義每行4個柵格項，高度均爲100px
    grid-template-columns: repeat(4,1fr);//定義每列4個柵格項，寬度均爲1fr
}

同時，repeat()也可以單獨對某列使用：

.container {
    grid-template-columns: 30px repeat(2,1fr) 30px;//其中2、3列重複
}

Grid Gaps（Gutters）

每個柵格項之間可能需要間隔（水槽），類似設置了margin，grid-column-gap和grid-row-gap就可以用來定義水槽的尺寸。但是，需要注意的是，不同於margin，水槽僅能在列和行之間創建，不能沿柵格容器的邊緣創建。水槽的大小可以是任意非負值(px,%,em等)。

.container {
 	grid-template-rows: repeat(4,100px);
 	grid-template-columns: 30px repeat(2,1fr) 30px;
    grid-row-gap: 20px;
    grid-column-gap: 5rem;
}
//or： 簡寫
.container {
 	grid-gap: 20px 5rem; //第一個表示grid-row-gap,第二個表示grid-column-gap,若只有一個值，表示grid-row-gap和grid-column-gap是相等的設置
}

Positioning Items by Grid Line Numbers

當我們定義Grid時，實際定義的是柵格軌道，而不是柵格線。我們可以給柵格創建編號，用以定位每一個柵格元素。柵格線本質上表示的是列和行的開始、結束或行列之間的線。從柵格項的起點開始並沿着柵格方向從1開始遞增編號。例如：下面3列2行的柵格中，擁有4條縱向的柵格線。

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>
.container {
    grid-template-rows: repeat(3,100px);
    grid-template-columns:repeat(3,1fr);
}

那麼怎樣定位柵格元素：使用柵格線定位。

.item:first-of-type {
    grid-column-start:1;
    grid-column-end: 4;
    grid-row-start:1;
    grid-row-end: 3;
}

上面代碼中，從左至右，第一個柵格元素從列線1開始，延伸至列線4。同時，從行線1延伸至行線3。這樣，3列3行的柵格產生了4列線，4行線。

同時，你還可以使用簡寫：

grid-row:2;//grid-row是grid-row-start和grid-row-end的簡寫
grid-column: 3/4;//grid-column是grid-column-start和grid-column-end的簡寫

如果只提供一個值，則表示grid-row-start或grid-column-start

如果只提供兩個值，則第一個值表示grid-row-start或grid-column-start,第二個值表示grid-row-end或grid-column-end，並且兩個值要用正斜槓/分隔。

grid-area: 2/2/3/3;

grid-area是grid-row-start、grid-column-start、grid-row-end、grid-column-end的簡寫，且grid-area的值按這個順序對應。

Spanning Items Across Rows and Columns（跨行、跨列）

通常情況下，柵格項是不跨列和不跨行的。但是跨行和跨列又是在佈局中常見的操作。同樣，可以使用grid-column-start和grid-column-end來設置。

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>
.container {
    display:grid;
}
.item:first-of-type {//跨列，從1-4列跨越
    grid-column-start:1;
    grid-column-end:4;
 }
//or 簡寫：兩個值之間用正斜槓/分隔
.irem:first-of-type {
    grid-column: 1/4;
}

於是，我們可以看到：

<div class="container">
	<div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
</div>
.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.item:first-of-type {//跨行，從1-4行跨越
    grid-row-start:1;
    grid-row-end:4;
 }
//or 簡寫：兩個值之間用正斜槓/分隔
.item:first-of-type {
    grid-row: 1/4;
}

也可以使用span關鍵字，該關鍵字後面跟要跨越的列數或行數：

.item:first-of-type {
    grid-column: span 2; //跨域2列
    grid-row: 2/ span 2; //跨域2行
}

Naming Grid Lines （命名網格線）

在使用grid-template-rows和grid-template-columns屬性定義網格時，可以命名網格線。然後可以引用線名稱來定位網格項。

.container {
    display:grid;
    grid-template-rows:    [row-1-start] 1fr [row-2-start] 1fr [row-2-end];
    grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end];
}

使用grid-template-rows和grid-template-columns屬性定義網格時，爲網格線指定名稱。分配的行名稱必須用方括號括起來[name-of-line]並相對於網格軌道放置。例如：

[row-1-start]即使網格線名稱，對應第1行的網格線的開始。

再如：

.container {
    display:grid;
    grid-template-rows:    [row-start row-1-start] 1fr [row-1-end row-2-start] 1fr [row-2-end row-end];
    grid-template-columns: [col-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-end];
}

通過在方括號內添加名稱並用空格分隔每個名稱，可以將多個名稱分配給網格線。

然後，當按行名稱定位網格項時，可以引用每個行名稱。

那麼，我們可以試試，使用行名稱定位Grid Item：

使用行名稱定位Grid Item

使用命名網格線，可以按行名稱和數字定位Grid Item。

.container {
    display:grid;
    grid-template-rows:    [row-start row-1-start] 1fr [row-1-end row-2-start] 1fr [row-2-end row-end];
    grid-template-columns: [col-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-end];
}
.item:first-of-type {
    grid-row-start: row-2-start;
    grid-row-end: row-end;
    grid-column-start: col-2-start;
    grid-column-end: col-end;
}
// or: 簡寫
.item:first-of-type {
    grid-row: row-2-start / row-end;
    grid-column: col-2-start / col-end;
}

可以看到，我們把Item 1定位到了這個位置：

爲了方面，Grid 佈局還提供了repeat()函數爲行/列指定相同的名稱：

.container {
    display:flex;
    grid-template-rows: repeat(3,[row-start] 1fr [row-end]);
    grid-template-columns: repeat(3,[col-strat] 1fr [col-end]);
}

然後，我們可以進行定位：

.item:first-of-type {
   grid-row: row-start 2 / row-end 2;
   grid-column: col-start 1 / col-start 3;
 }

要按名稱相同的行定位，使用行的名稱和位置/名稱的出現次數（名稱和數字之間用空格分隔），例如：下面例子中，Item 1 的行位置從row-start的第2個網格線開始，並在名爲row-end的第2個網格線處結束。它的列位置從命名的col-start第一個網格線開始，並在名爲col-start的第2個網格線處結束。

按網格區域命名和定位網格項

與網格線名稱一樣，網格區域也可以使用grid-template-areas屬性命名。然後可以引用名稱來定位網格項。

.container {
    grid-template-areas: "header header" "content sidebar" "footer footer";
    grid-template-rows: 150px 1fr 100px;
    grid-template-columns: 1fr 200px;
}

名稱用雙引號或單引號括起來，每個名稱用空格分隔。
每組名稱都定義一行，其中的每個名稱定義一列。

例如，上面代碼中我們定義一個3行2列的名稱組。

引用名稱

網格區域名稱可以用相同的屬性值來定位網格項。例如：

.container {
    grid-template-areas: "header header" "content sidebar" "footer footer";
    grid-template-rows: 150px 1fr 100px;
    grid-template-columns: 1fr 200px;
}
.container .grid-item {//居中內容
    display: flex;
    display: -ms-flexbox;
    align-items:  center;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.container .header {
    grid-row-start: header;
    grid-row-end: header;
    grid-column-start: header;
    grid-column-end: header;
}
//or 簡寫:
.container .header {
    grid-row: header;
    grid-column: header;
}
//同時，grid-area屬性也可以用來引用網格區域名稱：
.container aside {
    grid-area: sidebar;
}

【CSS】Grid 柵格佈局 | 更新中..命名網格項

【CSS】 Grid 柵格佈局

Grid Container

Explicit Grid

Minimum and Maximum Grid Track Sizes

Repeating Grid Tracks

Grid Gaps（Gutters）

Positioning Items by Grid Line Numbers

Spanning Items Across Rows and Columns（跨行、跨列）

Naming Grid Lines （命名網格線）

使用行名稱定位Grid Item

按網格區域命名和定位網格項

引用名稱

隱式網格

[軟件工具百科] 互聯網資源歷史快照歸檔站點與數字圖書館

杭州的 IT 崩盤了麼？

VS2022 解決方案打不開 .NET Framework 4.0 、 4.5 等老項目

Vue3 運行可以，build 打包發佈報錯，app.config.globalProperties 用法坑

既然測試也要求寫代碼，那乾脆讓開發兼任測試不就好了嗎？

程序員常見的文本查看工具

ITSM落地經驗之建設藍圖規劃

PDF 補丁丁 1.0.2 版更新

奇怪！應用的日誌呢？？

【問題歸納】前端開發問題集 | css 設置div寬高比1:2

【前端試題】前端之九陽真經 | 每日更新一題（附解析）| 今日試題：輸出下列代碼執行的結果

【D3.js - v5.x】（2）繪圖 | 比例尺 | 座標軸 | 柱狀圖 | 過渡

【PWA】PWA入門到進階

【Web Components】Web Components 的最新開發方法

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結