Grid網格布局入門筆記

2021-10-25 11:13:55 字數 1131 閱讀 9501

指定乙個容器採用網格布局，在父元素中定義grid屬性

display


:grid; //塊級元素布局


或display


:inline-grid; //行內元素
在容器中新增了網格布局後，就要劃分行和列，columns(列)、row(行)

grid-template-columns //定義每一列的寬度


grid-template-row //定義每一行的高度
當使用gird布局後，容器子元素中的float、display:inline-block、vertical-align都會失效

例項效果如下：

123


4567


89.main
這樣就簡單的實現了grid布局。但是感覺grid-template-columns: 100px 100px 100px;這樣寫非常麻煩，尤其是列數多的時候。這時我們可以使用repeat()函式，這樣可以簡化重複。現在用repeat()函式 看下效果

.main
為了方便表示比例關係，可以使用fr 關鍵字， 1fr 和2fr 表示後者是前者的兩倍，

如果在專案中，我們經常對頁面布局採用左右兩欄的布局，這樣我們就看下**

.main
下面就說下行間距和列間距：

grid-row-gap表示行間距

grid-column-gap表示列間距

grid-row-gap


: 20px;


grid-column-gap


: 20px;


或者簡寫成


grid-gap


: 20px 20px;

Grid網格布局入門

1.作用在父容器上的屬性 1 display grid 2 grid template columns 設定列數 3 grid template rows 設定行數 從 中可以看到，給box設定了三行三列的網格，每乙個網格寬高分別為100px 100px 這樣重複設定同樣的值會比較麻煩，這時候我們可...

Grid網格布局

前言 就目前為止，css的grid和flexbox結合將是解決布局的最佳方案。雖然瀏覽器對css grid和flexbox的屬性未完全支援，但對於實現布局而言，這已是一種非常完美的結合。如果css box alignment module level3能得到更好的支援的話，那麼對於web的布局將是一...

Grid網格布局

flex 布局是軸線布局，只能指定 專案 針對軸線的位置，可以看作是一維布局。grid 布局則是將容器劃分成 行 和 列 產生單元格，然後指定 專案所在 的單元格，可以看作是二維布局。grid 布局遠比 flex 布局強大。可以使用repeat repeat 3,33.33 定義三列，每一列為33....