以下主要參考了http://www.ruanyifeng.com/blo... 和 https://developer.mozilla.org... 兩篇文章。如果還想更詳細的可以看一看這兩篇文章。大鵬一日同風起，扶搖直上九萬里！一起學習，一起進步！

CSS佈局

傳統方案是基於盒裝模型，依賴display屬性+position屬性+float屬性，但對於一些特殊佈局（eg:垂直居中）就不容易實現。

補充：
塊元素：出現在另一個元素下面的元素；
內聯元素：出現在另一個元素旁邊的元素，就像段落中的單個單詞一樣；

dispaly屬性一些默認的display的值，段落之間樣式默認值為：display:block；<a>元素默認為display:inline。

注：display:flex和display:grid在佈局上比較重要。

1、Flex佈局

• 彈性盒子(Flexbox)

用於創建橫向/縱向的一維頁面佈局，在其父元素上應用display:flex，所有直接子元素機會按照flex進行佈局，但是子元素的float,clear,vertical-align屬性將失效。

任何一個容器都可指定為flex佈局。

.box {
   display: flex;
}
<div class="box">
    <div class="box1">one</div>
    <div class="box2">two</div>
    <div class="box3">three</div>
</div>

.box {
   display: flex;
}
.box > div {
    flex:1
}
<div class="box">
    <div class="box1">one</div>
    <div class="box2">two</div>
    <div class="box3">three</div>
</div>

.container{
    display:flex;
    flex-wrap: wrap; /*可換行*/
    justify-content:center;
}
.item{
    flex: 0 1 150px;
    margin: 5px; /*外邊距*/
}

flex：是flex-grow、flex-shrink、flex-basis的合併形式。

2、Grid佈局

• 用於同時在兩個維度把元素按行和列排列整齊。grad-template-rows和grid-template-columns定義了行和列的軌道。grid-gap定義了網格間的間距。

Grid 佈局只對項目生效，不對項目子元素起作用。

如下代碼：

.box {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grad-template-rows: 100px 100px;
    grid-gap:10px;
}
<div class="box">
    <div class="box1">one</div>
    <div class="box2">two</div>
    <div class="box3">three</div>
    <div class="box1">one</div>
    <div class="box2">two</div>
</div>

注：
a.fr單位跨網格軌道可用空間的分佈。上面代碼中有着3個大小為1fr的軌道的網格容器，創建了三個列軌道；
b.若最後一個是2fr，則表示最後一個軌道是前者的二倍；
c.還可以與絕對單位結合使用，eg:
grid-template-columns: 150px 1fr 2fr;表示第一列寬是150像素，第三列寬是第二列寬的2倍;
d.grid-template-columns: 150px auto 150px;auto 表示由瀏覽器自己決定

• 默認情況下，容器元素都是塊級元素，但也可以設為行內元素。如下代碼，就是指定了div是一個行內元素，該元素內部採用網格佈局：

div{display: inline-grid;}

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

• 容器指定了網格佈局後，就要劃分行和列了。

  列寬：grid-template-columns
  行高：grid-template-rows

代碼如下：

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

上面代碼指定了一個三行三列的網格，列和寬都是100px,當然也可用百分比;
或用repeat(3,100px)也可；
或用repeat(auto-fill,100px)，當容器大小不確定時可以用。

• 比較常用的佈局

兩欄佈局：

grid-template-columns: minmax(150px,25%) 1fr;

表示第一列寬度最小為150px，最大寬度為總寬度的25%。

三明治佈局
grid-template-rows：auto 1fr auto;
垂直劃分為上中下三部分（頁眉、內容區、頁腳），頁眉和頁腳都是本來的內容高度，內容區是剩下所有的高度。

聖盃佈局（最常用）
是將三明治佈局中的內容區分成三部分（左邊欄、主欄、右邊欄）

html代碼：

<div class="container">
    <header/>
    <div>
    <main/>
    <div/>
    <footer/>
</div>

CSS代碼：

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

表示垂直方向（頁眉和頁腳都是本身內容高度，內容區佔滿剩餘的高度），水平方向（左邊欄和右邊欄都是本身內容高度，中間主欄佔滿剩餘的高度）。

十二網格佈局：

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

一些常用的網格屬性

• 行間距：grid-row-gap
• 列間距：gid-column-gap
• 合併寫法：grid-gap

• 設置單元格內容的水平位置：justify-items
• 設置單元格內容的垂直位置：align-items
• 合併寫法：place-items

• 整個內容區域在容器裏面的水平位置：justify-content
• 整個內容區域在容器裏面的垂直位置：align-content
• 合併寫法：place-content

• grid-column：1/3等同於grid-column: 1/span 2表示從第一根列線到第三根列線（即第一列和第二列）
• grid-row：1/span 2，第一根行線，橫跨兩個網格，（即表示第一行和第二行）
• grid-area：指定項目放在哪個區域

如不完善之處，評論區歡迎您！