回顧一下web頁面布局的歷程，於我個人而言，經歷了最開始的學習計算機程式設計時的table布局和基礎的div+css布局，再到後來的flex彈性盒布局。div+css布局給web頁面布局帶來了更多可能，解決了table布局的侷限性。頁面是以**的自上而下的文件流的形式呈現的，所以div+css的浮動解決了橫向布局的問題。再後來css3提供了flex布局的特性，讓橫向布局特別是移動端布局變得更加容易。
本文主要來說說與flex布局類似的grid布局。flex給我們帶來了「軸線」的概念，相當於是「一維」的，而grid布局則是將容器分成了「行」和「列」，可以說是「二維」的。
老規矩，只說乾貨，開整。
首先，我們的基本結構如下：
*
.container
.item
.item:nth-child(2n)
.item:nth-child(2n + 1)
class看看效果：="container"
>
class
="item"
>
1div
>
class
="item"
>
2div
>
class
="item"
>
3div
>
class
="item"
>
4div
>
class
="item"
>
5div
>
class
="item"
>
6div
>
div>
先給父容器加上display: grid
此時，通過檢查元素可以發現，給父容器宣告grid布局之後，容器根據內容自動分割成了6行()。到這兒，我突然明白了什麼…grid不同於flex的「軸」的概念，所以發現此時雖然已經設定了父容器為grid，但是容器內的元素仍然是流式排列。既然此處有了行，那麼應該也會有列的概念，以及該如何設定行和列的寬度和位置的問題。
可以通過
grid-template-rows: 120px 120px 120px 120px 120px 120px;設定每一行的寬度，然後通過設定grid-template-columns: 120px 120px 120px 120px 120px 120px;來改變列的寬度。此時，頁面樣式變成了這樣：由行和列組成的區域我們把他稱為單元格。剛才說到了
grid-template-rows和grid-template-columns屬性，像剛才那種情況可以用repeat函式簡寫，repeat接收兩個引數，第乙個引數是要重複的次數，第二個引數是要重複的值，基本示例如下：
.container
.container
auto-fill的意思就是用120px的列來填充容器，直至填滿為止。
.container
.container
fr是fraction（意為部分、片段）的縮寫，1fr代表佔據父容器rows的fr總和的乙份。寫到這兒我想到了那道經典的css布局問題：如何實現左側固定寬度，右側寬度自適應？（類似於後台管理系統的左側選單固定寬度，右側內容區域寬度自適應的效果）。如果用grid布局來做的就很簡單：
.container
display: grid之後的容器仍然是塊級元素，如果需要行內塊元素的話，使用display: inline-grid即可，這一點和flex布局是一樣的。
單元格的相鄰區域稱為網格線，示意圖如下：
設想一種情況，如果單元格的寬高大於單元格內內容的寬高，那麼該如何去設定內容在單元格中的內容呢？此處引入justify-items屬性和align-items屬性。 熟悉flex布局同學應該都知道這個，但是在grid布局中有些許區別。
示例**：
.container
這樣單元格裡的內容就在單元格中居中了，這兩個屬性的寫法完全相同，都可以取下面這些值。
start：對齊單元格的起始邊緣。
end：對齊單元格的結束邊緣。
center：單元格內部居中。
stretch：拉伸，佔滿單元格的整個寬度（預設值）。
flex類似，grid也可以使用justify-content和align-content屬性來控制內容在容器中的位置，屬性值和用法與flex類似，此處不再贅述。
哦~對了，順便提一嘴grid的相容性，據我個人平時觀察還是有不少專案在使用的，在caniuse上查詢了一下瀏覽器的支援情況，如下：
flex布局基本概念
box sizing box sizing content box 寬高只是內容的寬高，加入邊框和內邊距向外擴張 box sizing border box 寬高是總盒子的寬高，加入邊框和內邊距向內壓縮。flex布局 採用flex布局的元素，成為flex容器 box flex容器的所有子元素自動成為...
Flexbox布局的基本概念
flex容器是flex元素的的父元素。通過設定display屬性的值為flex或inline flex定義。注舊版本的屬性值 flex容器的每乙個子元素均為乙個flex子元素。注意 felx容器直接包含的文字變為匿名的彈性子元素。注意 flexbox布局和原來的布局是2套概念，所以部分css屬性在f...
基本概念 C 基本概念
由於工作中需要用到c 編寫的一些工具，有時候需要根據需求修改或者定製工具，所以現在不得不學習一下c 的基礎語法，此為筆記，不成章法！機器語言 組合語言 高階語言 面向過程的程式設計方法 物件導向的程式設計方法 泛型程式設計方法 1 演算法設計 2 源程式編輯 3 編譯 4 連線 5 執行除錯 輸入裝...