grid網格布局使用

2022-08-12 01:00:16 字數 2473 閱讀 8991

grid布局是指對網頁進行劃分成乙個乙個網格，然後根據自己的要求，可以任意組合。

以前寫類似的功能，很麻煩，需要寫很多的css去控制，有了grid就很方便了，可以隨意進行組合。

跟flex有很多地方相似，包括有部分屬性。不同的地方也很突出，尤其是flex是一維，只有橫向。而grid是有橫向和縱向。另外grid功能要更強大點。

通過對父元素進行設定display:grid，表示裡面包裹的元素全是網格布局。

display:grid
grid-template-columns：表示每行的寬度，有幾個表示每行有幾列，多出部分會往下排列

grid-template-cols：表示每列的寬度

.grid
以上的**表示橫向的每個item寬度和高度是50px，多出乙個就會被自動排布下去。

單位單位既可以是px，也可以是百分比，或者用auto

.grid

.grid

.grid
repeat()

repeat()用來處理幾個item寬度相同的時候，避免寫相同的數值，或者是重複某種模式

.grid

.grid
auto-fill

當容器的寬度不確定，但是item的寬度確定，一行盡可能多的容納item，這時可以使用auto-fill

.grid
fr方便表示比例關係，使用fr來表示

.grid
這表示後者是前者的2倍

fr也可跟px結合，會更方便

.grid
上面**表示第一列是100px，第二列是第三列的一半。

minmax

表示最大值最小值

.grid
上面**表示，最小值不小於100px，最大值不大於1fr

row-gap：每行之間的間距

column-gap：每列之間的間距

gap：縮寫行/列間距

.grid
或者簡便的寫法：gap

.grid
上面**表示行/列之間的間隔是10px

grid-area和grid-template-area，用來劃分區域,grid-area用來指定item的名稱，grid-template-area根據子區域的名稱來排布，表示展現的方式

.grid


.div1
上面**表示div區域指代的grid的div1，整個頁面想展示的布局是如下圖：

網格布局一般根據橫向依次排布，如果想豎向排序，可以設定grid-auto-flow

.grid
上面的**表示按照豎向排序。

justify-items/align-items類似，乙個是水平方向上的展示，乙個是垂直方向上的展示，屬性一致

start：對齊起始位置


end：對齊結束位置


center：居中展示


stretch:拉伸至整個寬度
justify-items：設定的是item的水平方向展現方式。

.grid
上面**表示每個item居中展示

align-items：設定的是垂直方向上的展現方式。

.grid
上面**表示item在垂直方向上居中展示

place-items是align-items和justify-items的結合

place-items:
justify-content/align-content類似，乙個是展示水平方向上，乙個是展示垂直方向

justify-content：是指整個grid在整個容器中的水平方向展示位置

.grid
上面**表示整個grid水平展現方式

可以指定專案的位置，通過控制左右上下的網格線

grid-column-start:左邊框的網格線


grid-column-end：右邊框的網格線


grid-row-start：上邊框的網格線


grid-row-end：下邊框的網格線


.div1
上面**表示第乙個item的位置，開始位置是2，結束位置是4，上面的位置是1，下的位置是3，其他的item根據瀏覽器排布，由grid-auto-flow來決定，預設是先行後豎

tips:參考阮一峰的文章css grid網格布局教程

Grid網格布局

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

Grid網格布局

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

grid網格布局

1.1 容器和專案 採用網格布局的區域，稱為 容器 container 容器內部採用網格定位的子元素，稱為 專案 item 1.2 行和列 容器裡面的水平區域稱為 行 row 垂直區域稱為 列 column 1.3 單元格 行和列的交叉區域，稱為 單元格 cell 正常情況下，n行和m列會產生n x...