網格布局 1

grid 布局則是將容器劃分為「行」和「列」，產生單元格，然後指定專案所在的單元格。可以看作是二維布局。

採用網格布局的區域，稱為「容器」。容器內部採用網格定位的子元素，稱為「專案」。

注意：專案只能是容器的頂層子元素，不包含專案的子元素，比如上面的 就不是專案。

容器的水平區域稱為「行」，垂直區域稱為「列」。

上平深色區域就是行，垂直深色區域就是列。

劃分網格的線，稱為「網格線」。水平網格線劃分出行，垂直網格線劃分出列。

正常情況下，n 行就有 n + 1 根水平網格線，m 列就有 m + 1 跟垂直網格線，比如三行就有四根水平網格線。

上圖是乙個 4 x 4 的網格，共有 5 根水平網格線和 5 跟垂直網格線。

grid 布局的屬性分為兩類。一類是定義在容器上面的，稱為容器屬性；另一類是定義在專案上的，稱為專案屬性。

display 屬性

預設情況下，容器都是塊級元素，但是也可以設定為行內元素。

注意：設為網格布局後，容器子元素的 float、display: inline-block、display: table-cell、vertical-align 和 column-* 都等設定將失效。 

.box

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

.box

接受兩個引數，第乙個引數是重複次數，第二個引數是所要重複的值（或者是某種格式）。

如果希望每一行（或每一列）能夠盡可能的容納多的單元格，可以使用 auto-fill 關鍵字自動填充。

grid-template-columns: repeat(auto-fill, 100px);

上面**表示每列寬度是 100px，然後自動填充，直到容器不能放置更多的列。 

如果兩列的寬度分別是 1fr 和 2fr，就表示後者是前者的兩倍。

fr 可以與絕對單位結合使用。

grid-template-columns: 150px 1fr 2fr;

第一列寬度為 150px；第二列的寬度是第三列的一半。 

minmax 函式產生乙個長度範圍，長度就在這個範圍之中。接受兩個引數，分別是最小值和最大值。

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

minmax(100px, 1fr) 表示列寬不小於 100px，不大於 1fr。

由瀏覽器自己決定長度。

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

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

.container

上面**指定網格布局為3行 x 3列，因此有4根垂直網格線和4根水平網格線。方括號裡面依次是這八根線的名字。

網格布局允許同一根線有多個名字，比如[fifth-line row-5]。

display: grid;

grid-template-columns: 70% 30%;}

上面**將左邊欄設為70%，右邊欄設為30%。

grid-template-columns: repeat(12, 1fr);    // 傳統的十二網格布局

css 網格布局 CSS網格布局簡介

css 網格布局 css在不斷發展。目前正在談論的某些功能可能會在不久的將來成為主流，而其他功能可能會逐漸淡出人們的視線。無論哪種方式，了解將來考慮使用哪些css選擇器，布局模組和過濾器都將使您成為更強大的前端開發人員。網格布局是一種很快就會被廣泛接受的選擇。您可以想象，css的這一子集可以簡化內容...

Grid布局（網格布局）

網格布局 grid 是 css 中乙個布局方案。它將網頁劃分成乙個個網格，可以任意組合不同的網格，做出各種各樣的布局。以前，只能通過複雜的 css 框架達到的效果，現在瀏覽器內建了。下面這樣的布局，就是grid布局。grid 布局與 flex 布局有一定的相似性，都可以指定容器內部多個專案的位置。但...

網格布局（grid布局）

他可以將頁面分為多個網格，可以任意組合不同的網格 做出各種各樣的布局。網格布局為二維性質的。grid row gap 1rem 行間距 grid column gap 1rem 列間距 grid gap 1rem 設定行列間距 grid template columns 列寬和列數 grid tem...