網格布局是flex的公升級版
父級屬性display: grid;即可把這個div變成網格；
父級屬性grid-template-columns: 20% 20% 20% 20%;設定有多少列，每列有多寬。auto自動填；1fr 2fr 設定比例倍數；
父級屬性grid-template-rows: 200px 200px 100px 300px;設定每行有多高。auto自動填充；
父級屬性grid-gap: 10px 20px ;設定上下左右外邊距；
父級屬性：內容區域：align-items（垂直）、justify-items（水平）整體區域：align-content、justify-content；
grid-auto-flow: row dense;先行後列，盡可能填充緊密。
子屬性grid-column-start：左邊框所在的垂直網格線 ；上下左右線構成乙個區域，以線為劃分哦。
子屬性grid-column-end：右邊框所在的垂直網格線
子屬性grid-row-start：上邊框所在的水平網格線
子屬性grid-row-end：下邊框所在的水平網格線
子屬性grid-row-start: span 3;列開始長度為3
子屬性grid-column-start: span 2;行開始長度為2
簡單來說，我們通過設定grid建立乙個網格。規定好行列，再設計小方塊佔據寬高有多大，隨意搭配，完成想要的樣式。
Css3網格布局的基礎用法
css3網格布局css網格布局 grid 是一套基於二維頁面布局系統 一 父元素相關屬性以及屬性值 1 網路容器 給父元素設定 將屬性display的屬性值設定為grid 或者 inline grid，就建立了乙個網格容器，所有容器中的接子元素將自動成為網格專案元素。display grid inl...
css 網格布局 CSS網格布局簡介
css 網格布局 css在不斷發展。目前正在談論的某些功能可能會在不久的將來成為主流，而其他功能可能會逐漸淡出人們的視線。無論哪種方式，了解將來考慮使用哪些css選擇器，布局模組和過濾器都將使您成為更強大的前端開發人員。網格布局是一種很快就會被廣泛接受的選擇。您可以想象，css的這一子集可以簡化內容...
關於css布局的記錄 二 網格布局
學習來自阮一峰老師的教程網格布局和網路上的一些資料的學習 1 定義 顧名思義，網格布局是將頁面按行 row 和列 column 劃分成乙個個網格來進行布局 使用方法 display grid inline grid來定義乙個容器為網格布局 在定義網格布局的容器裡面的display table cei...