網格布局知識點總結

它與傳統的布局方案，包括前面介紹的 flex 布局方案相比的特性在於：

和 flex 類似，grid 的使用同樣簡單，第一步，我們需要把某個容器指定成網格容器：

.grid

這個時候，.grid就變成了乙個網格容器（grid conatainer），包含在這個容器中的子元素則自動變成了網格項(grid items)， grid 的所有屬性都在兩個概念之間展開。

設定行的個數和高度，列的個數和寬度

.grid

repeat(個數，值) 重複方法

grid-template-columns: 200px 1fr repeat(3, 100px);

​.grid 
.grid 
​.grid

minmax(min,max)最大最小值區間​
​

.grid 

​

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

.container 

​

有時候，一些專案的指定位置，在現有網格的外部。比如網格只有3列，但是某乙個專案指定在第5行。這時，瀏覽器會自動生成多餘的網格，以便放置專案。

它們的寫法與grid-template-columns和grid-template-rows完全相同。如果不指定這兩個屬性，瀏覽器完全根據單元格內容的大小，決定新增網格的列寬和行高。(指定超出網格外部的元素大小)

grid-auto-flow劃分網格以後，容器的子元素會按照順序，自動放置在每乙個網格。預設的放置順序是"先行後列"，即先填滿第一行，再開始放入第二行，即下圖數字的順序。這個順序由grid-auto-flow屬性決定，預設值是row，即"先行後列"。也可以將它設成column，變成"先列後行"。

grid-auto-flow: column/row/row-dense/column-dense;

grid-column-gap和grid-row-gap以及兩者合寫grid-gap

grid-gap用來設定網格間距，也就是兩個網格之間留出來的空白，其可以在橫向和縱向分別通過grid-column-gap和grid-row-gap來設定相應的大小，這兩個屬性值通常可以合寫為grid-gap：

.grid 

align-items與後者相同道理，不再贅述

屬性是整個專案內容在單元格裡面的水平位置（左中右）

.grid 

屬性值介紹：
​stretch: 預設值，內容充滿整個網格區域
start：網格項內容與網格區域左側對齊
end: 網格項內容與網格區域右側對齊
center: 網格項內容在網格區域居中顯示​​

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

.container

與上面的justify-content屬性值完全相同 只是排列方向變成了垂直方向

劃分容器的區域

grid-template-areas: "header header header"

"siderbar content content"
"footer footer footer";

.item1 

grid-column-start, grid-column-end，分別表示該網格項開始和結束的網格線序號，其值是代表網格線的編號。

豎直方向同理，使用grid-row-start和grid-row-end兩個屬性實現

.item1 

除了在網格容器上統一進行的設定，我們可以針對特定的網格項進行設定，決定其佔據的網格區域，我們可以借助網格線的約束，來決定某乙個網格項的空間

grid-column: 1/3;

grid-row: 2/4;

將專案放在某個特定區域內 覆蓋關係可以用z-index實現 與grid-row grid-column的兩個屬性功能相同

justify-self屬性設定單元格內容的水平位置（左中右），跟justify-items屬性的用法完全一致，但只作用於單個專案。

align-self屬性設定單元格內容的垂直位置（上中下），跟align-items屬性的用法完全一致，也是只作用於單個專案。

.item 

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

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

css grid 網格布局 常用總結

容器裡面的水平區域稱為 行 row 垂直區域稱為 列 column 容器屬性 display grid指定乙個容器採用網格布局 display inline grid 行內元素。注意，設為網格布局以後，容器子元素 專案 的float display inline block display tabl...

Grid布局（網格布局）

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