《圖解CSS》佈局

何爲佈局

此處說的佈局是對HTML界面元素的佈局，也就是對網頁中的元素進行位置上的安排。
那麼我們爲什麼需要佈局和如何佈局呢？

爲什麼需要佈局

我們在設計網頁時,一般都是自頂向下，自左向右，可能存在很多不同的小模塊。假設我們不懂佈局，那麼網頁會是什麼樣？
可能是隻有自頂向下，一個接着一個堆砌下去，如下圖：

也可能有人會利用行內元素不會換行的特點，做出一個左右的佈局。

但是瞭解HTML朋友應該知道，行內元素無法設置寬和高，一般情況下，行內元素只能包含數據和行內元素，不能包含塊級元素。而且當文字過長時還是會換行的，左右佈局也就不成立了。

但是在實際開發中，我們需要設計出各種各樣的網頁，自然就缺少不了佈局的參與，有了好的佈局，網頁的模塊劃分纔會更加清楚，纔會更加賞心悅目。

如何佈局

我們可以利用HTML的Table進行佈局，我們也可以利用CSS進行佈局。
table佈局相對容易，但是在開發中並不常用，一方面標籤書寫過多，佔用過多的資源，其次是會阻擋瀏覽器渲染引擎的渲染順序，造成頁面生成的速度延遲等缺點。
利用CSS佈局又可分爲傳統佈局方式、flex佈局和grid佈局。

接下來，我們一起了解下各個佈局~

table佈局

利用table可以進行佈局，但是使用table佈局有些得不償失，更多的還是使用table進行表格的設計。爲什麼說得不償失呢？我們來看看table的優缺點：

tables的缺點

Table要比其它html標記佔更多的字節。(延遲下載時間，佔用服務器更多的流量資源。)
Tablle會阻擋瀏覽器渲染引擎的渲染順序。(會延遲頁面的生成速度，讓用戶等待更久的時間。)
Table裏顯示圖片時需要你把單個、有邏輯性的圖片切成多個圖。(增加設計的複雜度，增加頁面加載時間，增加HTTP會話數。)
在某些瀏覽器中Table裏的文字的拷貝會出現問題。(這會讓用戶不悅。)
Table會影響其內部的某些佈局屬性的生效(比如<td>裏的元素的height:100%)(這會限制你頁面設計的自由性。)
一旦學了CSS知識，你會發現使用table做頁面佈局會變得更麻煩。(先花時間學一些CSS知識，會省去你以後大量的時間。)
table對對於頁面佈局來說，從語義上看是不正確的。(它描述的是表現，而不是內容。)
table代碼會讓閱讀者抓狂。(不但無法利用CSS，而且會你不知所云)
table一旦設計完成就變成死的，很難通過CSS讓它展現新的面貌。

Tables的優點

在某些場合，使用Table是100%的適合、恰當和正確。比如，用table做表格是完全正確的。

雖然不推薦，但是還是使用table做個佈局看看~
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=">
    <meta http-equiv="X-UA-Compatible" content="">
    <title></title>
    <style>
        table{
            width:100%;
        }
        tr:first-child{
            background-color:red;
        }
        tr:last-child{
            background-color:blue;
        }

        td{
            text-align:center;
        }
    </style>
</head>
<body>
    <table  border="0" cellspacing="0">
        <tr>
            <td colspan="2">頭部</td>
        </tr>
        <tr>
            <td>左邊</td>
            <td>右邊</td>
        </tr>
        <tr>
            <td colspan="2">底部</td>
        </tr>
    </table>
</body>
</html>

傳統佈局

傳統佈局是基於盒狀模型，依賴 display 屬性 + position屬性 + float屬性。它對於那些特殊佈局非常不方便，比如，垂直居中就不容易實現。

float知識點可參考《CSS浮動與清除》一節。float佈局是佈局中常見的一種方式，但是需要注意高度塌陷的問題。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=">
    <meta http-equiv="X-UA-Compatible" content="">
    <title></title>
    <style>
        div{text-align:center;}
        .header{background-color:red;}
        .content{display:relative;}
        .left{float:left; background-color:yellow; width:30%;}
        .center{float:left; background-color: blue; width:30%;}
        .right{background-color:pink;}
        .footer{background-color:red;}
    </style>
</head>
<body>
    <div class="container">
        <div class="header">頭部</div>
        <div class="content">
            <div class="left">左</div>
            <div class="center">中</div>
            <div class="right">右</div>
        </div>
        <div class="footer">底部</div>
    </div>
</body>
</html>

flex佈局

參考地址：

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
https://www.runoob.com/w3cnote/flex-grammar.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

2009年，W3C提出了一種新的方案—-Flex佈局，可以簡便、完整、響應式地實現各種頁面佈局。目前，它已經得到了所有瀏覽器的支持，這意味着，現在就能很安全地使用這項功能。

flex佈局是什麼

Flex 是 Flexible Box 的縮寫，意爲"彈性佈局"，用來爲盒狀模型提供最大的靈活性。
任何一個容器都可以指定爲 Flex 佈局:

.box{
  display: flex;
}

行內元素也可以使用 Flex 佈局:

.box{
  display: inline-flex;
}

Webkit 內核的瀏覽器，必須加上-webkit前綴:

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意，設爲 Flex 佈局以後，子元素的float、clear和vertical-align屬性將失效。

基本概念

採用 Flex 佈局的元素，稱爲 Flex 容器（flex container），簡稱"容器"。它的所有子元素自動成爲容器成員，稱爲 Flex 項目（flex item），簡稱"項目"。

容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
項目默認沿主軸排列。單個項目佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。

flex屬性

flex-direction：屬性決定主軸的方向（即項目的排列方向）

row（默認值）：主軸爲水平方向，起點在左端。
row-reverse：主軸爲水平方向，起點在右端。
column：主軸爲垂直方向，起點在上沿。
column-reverse：主軸爲垂直方向，起點在下沿。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=">
    <meta http-equiv="X-UA-Compatible" content="">
    <title></title>
    <style>
        .container { display: flex; }
        .container1 { flex-direction:row; }
        .container2 { flex-direction:row-reverse; }
        .container3 { flex-direction:column; }
        .container4 { flex-direction:column-reverse; }

        .item {
            width:60px;
            height:50px;
            background-color:red; 
            margin:5px;
        }
    </style>
</head>
<body>
    <div class="container container1">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
    <div class="container container2">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
    <div class="container container3">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
    <div class="container container4">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
</body>
</html>

flex-wrap

默認情況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。

nowrap（默認）：不換行。
wrap：換行，第一行在上方。
wrap-reverse：換行，第一行在下方。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=">
    <meta http-equiv="X-UA-Compatible" content="">
    <title></title>
    <style>
        .container { display: flex; border:1px solid black; margin:5px;}
        .container1 { flex-wrap:nowarp; }
        .container2 { flex-wrap:wrap; }
        .container3 { flex-wrap:wrap-reverse; }

        .item {
            width:200px;
            height:50px;
            background-color:red; 
            margin:5px;
        }
    </style>
</head>
<body>
    <div class="container container1">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
    <div class="container container2">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
    <div class="container container3">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
</body>
</html>

flex-flow

屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap

<flex-direction> || <flex-wrap>
justify-content: 定義了項目在主軸上的對齊方式。
- flex-start（默認值）：左對齊
- flex-end：右對齊
- center：居中
- space-between：兩端對齊，項目之間的間隔都相等。
- space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=">
    <meta http-equiv="X-UA-Compatible" content="">
    <title></title>
    <style>
        .container { display: flex; border:1px solid black; margin:5px;}
        .container1 { justify-content: flex-start; }
        .container2 { justify-content: flex-end; }
        .container3 { justify-content: center; }
        .container4 { justify-content: space-between; }
        .container5 { justify-content: space-around; }

        .item {
            width:50px;
            height:50px;
            background-color:red; 
            margin:5px;
        }
    </style>
</head>
<body>
    <div class="container container1">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
    <div class="container container2">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
    <div class="container container3">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
    <div class="container container4">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
    <div class="container container5">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
</body>
</html>

align-items

定義項目在交叉軸上如何對齊。

flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。
stretch（默認值）：如果項目未設置高度或設爲auto，將佔滿整個容器的高度。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=">
    <meta http-equiv="X-UA-Compatible" content="">
    <title></title>
    <style>
        .container { display: flex; border:1px solid black; margin:5px;}
        .item { background-color:red; margin:5px;}
        
        .container1 { align-items: stretch; height: 50px; }
        .container2 { align-items: flex-start; }
        .container3 { align-items: flex-end; height: 50px;}
        .container4 { align-items: center; height: 50px; }
        .container5 { align-items: baseline; height: 50px; }
        .container5 .item:nth-child(2) { font-size: 30px;}
    </style>
</head>
<body>
    <div class="container container1">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
    <div class="container container2">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
    <div class="container container3">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
    <div class="container container4">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
    <div class="container container5">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>
</body>
</html>

align-content

定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。

flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線佔滿整個交叉軸。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=">
    <meta http-equiv="X-UA-Compatible" content="">
    <title></title>
    <style>
        .container { display: flex; border:1px solid black; 
            margin:5px; flex-wrap: wrap; height: 250px;}
        .container1 { align-content: flex-start; }
        .container2 { align-content: flex-end; }
        .container3 { align-content: center; }
        .container4 { align-content: space-between; }
        .container5 { align-content: space-around; }

        .item {
            width:50px;
            height:50px;
            background-color:red; 
            margin:5px;
        }
    </style>
</head>
<body>
    <div class="container container1">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
    </div>
    <div class="container container2">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
    </div>
    <div class="container container3">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
    </div>
    <div class="container container4">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
    </div>
    <div class="container container5">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
        <div class="item">item3</div>
    </div>
</body>
</html>

項目屬性

order

定義項目的排列順序。數值越小，排列越靠前，默認爲0。

<integer>

flex-grow

定義項目的放大比例，默認爲0，即如果存在剩餘空間，也不放大。

<number>; /* default 0 */

flex-shrink

定義了項目的縮小比例，默認爲1，即如果空間不足，該項目將縮小。

<number>; /* default 1 */

flex-basis

定義了在分配多餘空間之前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的本來大小。

<length> | auto; /* default auto */

flex

flex是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。

none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

align-self

允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。

auto | flex-start | flex-end | center | baseline | stretch;

Grid佈局

參考網址：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout
http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
https://www.html.cn/archives/8510
https://www.w3cschool.cn/lugfe/lugfe-ckg225zp.html
https://www.jianshu.com/p/d183265a8dad

有了flex佈局，爲什麼還需要grid佈局呢？

Grid 佈局與 Flex 佈局有一定的相似性，都可以指定容器內部多個項目的位置。但是，它們也存在重大區別。
Flex 佈局是軸線佈局，只能指定"項目"針對軸線的位置，可以看作是一維佈局。Grid 佈局則是將容器劃分成"行"和"列"，產生單元格，然後指定"項目所在"的單元格，可以看作是二維佈局。

概述

它將網頁劃分成一個個網格，可以任意組合不同的網格，做出各種各樣的佈局。以前，只能通過複雜的 CSS 框架達到的效果，現在瀏覽器內置了。

基本概念

容器和項目
採用網格佈局的區域，稱爲"容器"（container）。容器內部採用網格定位的子元素，稱爲"項目"（item）。
行和列
容器裏面的水平區域稱爲"行"（row），垂直區域稱爲"列"（column）。
單元格
行和列的交叉區域，稱爲"單元格"（cell）。
正常情況下，n行和m列會產生n x m個單元格。比如，3行3列會產生9個單元格。
網格線
劃分網格的線，稱爲"網格線"（grid line）。水平網格線劃分出行，垂直網格線劃分出列。
正常情況下，n行有n + 1根水平網格線，m列有m + 1根垂直網格線，比如三行就有四根水平網格線。

容器屬性

display

display: grid | inline-grid;
注意，設爲網格佈局以後，容器子元素（項目）的float、display: inline-block、display: table-cell、vertical-align和column-*等設置都將失效。

grid-template-columns,grid-template-rows

容器指定了網格佈局以後，接着就要劃分行和列。grid-template-columns屬性定義每一列的列寬，grid-template-rows屬性定義每一行的行高。

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

除了使用絕對單位，也可以使用百分比。

repeat()
有時候，重複寫同樣的值非常麻煩，尤其網格很多時。這時，可以使用repeat()函數，簡化重複的值。上面的代碼用repeat()改寫如下。

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}

repeat()接受兩個參數，第一個參數是重複的次數（上例是3），第二個參數是所要重複的值。
repeat()重複某種模式也是可以的。

auto-fill 關鍵字
有時，單元格的大小是固定的，但是容器的大小不確定。如果希望每一行（或每一列）容納儘可能多的單元格，這時可以使用auto-fill關鍵字表示自動填充。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

fr 關鍵字
爲了方便表示比例關係，網格佈局提供了fr關鍵字（fraction 的縮寫，意爲"片段"）。如果兩列的寬度分別爲1fr和2fr，就表示後者是前者的兩倍。

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

minmax()
minmax()函數產生一個長度範圍，表示長度就在這個範圍之中。它接受兩個參數，分別爲最小值和最大值。

grid-template-columns: 1fr 1fr minmax(100px, 1fr);

auto 關鍵字
auto關鍵字表示由瀏覽器自己決定長度。

grid-template-columns: 100px auto 100px;

上面代碼中，第二列的寬度，基本上等於該列單元格的最大寬度，除非單元格內容設置了min-width，且這個值大於最大寬度。

網格線的名稱
grid-template-columns屬性和grid-template-rows屬性裏面，還可以使用方括號，指定每一根網格線的名字，方便以後的引用。

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

佈局實例
grid-template-columns屬性對於網頁佈局非常有用。兩欄式佈局只需要一行代碼。

.wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
}

傳統的十二網格佈局，寫起來也很容易。

grid-template-columns: repeat(12, 1fr);

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=">
    <meta http-equiv="X-UA-Compatible" content="">
    <title></title>
    <style>
        .container1 { display: inline-grid;   
                    grid-template-columns: 50px 50px 50px;
                    grid-template-rows: 50px 50px 50px;
                   }
        .container1 .item { background-color:red; margin:5px;}

        .container2 { display: inline-grid;
        height:150px;width:150px;
        grid-template-columns: repeat(3, 33.33%);
        grid-template-rows: repeat(3, 33.33%);
                   }
        .container2 .item { background-color:blue; margin:5px;}

        .container3 { display: inline-grid;height:150px;width:150px;
        grid-template-columns: 1fr 2fr 3fr}
        .container3 .item { background-color:yellow; margin:5px;}
    </style>
</head>
<body>
    <div class="container1">
        <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 class="item">8</div>
        <div class="item">9</div>
    </div>

    <div class="container2">
        <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 class="item">8</div>
        <div class="item">9</div>
    </div>
    <div class="container3">
        <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 class="item">8</div>
        <div class="item">9</div>
    </div>
</body>
</html>

grid-row-gap 屬性，grid-column-gap 屬性,grid-gap 屬性
grid-row-gap屬性設置行與行的間隔（行間距），grid-column-gap屬性設置列與列的間隔（列間距）。

.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}

grid-gap屬性是grid-column-gap和grid-row-gap的合併簡寫形式，語法如下。

grid-gap: <grid-row-gap> <grid-column-gap>;

grid-template-areas 屬性
網格佈局允許指定"區域"（area），一個區域由單個或多個單元格組成。grid-template-areas屬性用於定義區域。

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
}

如果某些區域不需要利用，則使用"點"（.）表示。

grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';

grid-auto-flow 屬性
劃分網格以後，容器的子元素會按照順序，自動放置在每一個網格。默認的放置順序是"先行後列"，即先填滿第一行，再開始放入第二行。
grid-auto-flow屬性除了設置成row和column，還可以設成row dense和column dense。這兩個值主要用於，某些項目指定位置以後，剩下的項目怎麼自動放置。
justify-items 屬性，align-items 屬性，place-items 屬性
justify-items屬性設置單元格內容的水平位置（左中右），align-items屬性設置單元格內容的垂直位置（上中下）。

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

place-items屬性是align-items屬性和justify-items屬性的合併簡寫形式。

place-items: <align-items> <justify-items>;

justify-content 屬性，align-content 屬性，place-content 屬性
justify-content屬性是整個內容區域在容器裏面的水平位置（左中右），align-content屬性是整個內容區域的垂直位置（上中下）。

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

place-content屬性是align-content屬性和justify-content屬性的合併簡寫形式。

place-content: <align-content> <justify-content>

grid-auto-columns 屬性，grid-auto-rows 屬性
有時候，一些項目的指定位置，在現有網格的外部。比如網格只有3列，但是某一個項目指定在第5行。這時，瀏覽器會自動生成多餘的網格，以便放置項目。
grid-auto-columns屬性和grid-auto-rows屬性用來設置，瀏覽器自動創建的多餘網格的列寬和行高。它們的寫法與grid-template-columns和grid-template-rows完全相同。如果不指定這兩個屬性，瀏覽器完全根據單元格內容的大小，決定新增網格的列寬和行高。

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

grid-template 屬性，grid 屬性
grid-template屬性是grid-template-columns、grid-template-rows和grid-template-areas這三個屬性的合併簡寫形式。
grid屬性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow這六個屬性的合併簡寫形式。

項目屬性

grid-column-start 屬性，grid-column-end 屬性，grid-row-start 屬性，grid-row-end 屬性
項目的位置是可以指定的，具體方法就是指定項目的四個邊框，分別定位在哪根網格線。
grid-column-start屬性：左邊框所在的垂直網格線
grid-column-end屬性：右邊框所在的垂直網格線
grid-row-start屬性：上邊框所在的水平網格線
grid-row-end屬性：下邊框所在的水平網格線
grid-column 屬性，grid-row 屬性
grid-column屬性是grid-column-start和grid-column-end的合併簡寫形式，grid-row屬性是grid-row-start屬性和grid-row-end的合併簡寫形式。
grid-area 屬性
grid-area屬性指定項目放在哪一個區域。
grid-area屬性還可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合併簡寫形式，直接指定項目的位置。
justify-self 屬性，align-self 屬性，place-self 屬性
justify-self屬性設置單元格內容的水平位置（左中右），跟justify-items屬性的用法完全一致，但只作用於單個項目。
align-self屬性設置單元格內容的垂直位置（上中下），跟align-items屬性的用法完全一致，也是隻作用於單個項目。
place-self屬性是align-self屬性和justify-self屬性的合併簡寫形式。

《圖解CSS》佈局

何爲佈局

爲什麼需要佈局

如何佈局

table佈局

tables的缺點

Tables的優點

傳統佈局

flex佈局

flex佈局是什麼

基本概念

flex屬性

flex-direction：屬性決定主軸的方向（即項目的排列方向）

flex-wrap

flex-flow

align-items

align-content

項目屬性

order

flex-grow

flex-shrink

flex-basis

flex

align-self

Grid佈局

有了flex佈局，爲什麼還需要grid佈局呢？

概述

基本概念

容器屬性

display

grid-template-columns,grid-template-rows

示例

項目屬性

實踐出真知：JS執行順序

tailwindcss vs windicss

關於360瀏覽器打開系統無法彈窗問題

微前端哪家強，簡單看看

Uncaught TypeError: d3.scaleOrdinal is not a function

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

linux以太網驅動總結