CSS grid 網(wǎng)格/柵格布局

時(shí)間：2023-08-31 09:06:02 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-08-31 09:06:02 來源：網(wǎng)站運(yùn)營(yíng)

CSS grid 網(wǎng)格/柵格布局：

grid 網(wǎng)格/柵格布局

網(wǎng)格布局有一個(gè)父元素和一些子元素組成

設(shè)置grid布局 設(shè)置在父元素身上

<!-- 設(shè)置grid布局，是通過dispaly屬性進(jìn)行設(shè)置的 -->display:grid;display:inline-grid;grid-template 設(shè)置網(wǎng)格軌道 就是設(shè)置網(wǎng)格的行數(shù)列數(shù) 設(shè)置在父元素身上

<!-- 設(shè)置網(wǎng)格列，設(shè)置三列，每列10px寬 -->grid-template-columns: 10px 10px 10px;<!-- 設(shè)置網(wǎng)格列，設(shè)置三行，每行10px寬 -->grid-template-rows: 10px 10px 10px;<!-- -->grid-gap 設(shè)置網(wǎng)格軌道之間的間隙 設(shè)置在父元素上

<!-- 設(shè)置網(wǎng)格列之間間隙為10px -->grid-column-gap:10px;<!-- 設(shè)置網(wǎng)格行之間間隙為10px -->grid-row-gap:10px;<!-- 設(shè)置網(wǎng)格行和列之間間隙為10px -->grid-gap: 10px; <!-- 第一個(gè)值為行第二個(gè)為列 --> grid-gap: 10px 20px;grid-column 設(shè)置網(wǎng)格子元素的占行列寬高的大小 設(shè)置在子元素上 - 線是指網(wǎng)格布局 grid-template 設(shè)置好后，每個(gè)單元格周圍的邊。 - 就比如 3X3布局，行線 列線都是4條。

<!-- 設(shè)置子元素列占線1到3的位置 -->grid-column:1/3;<!-- 設(shè)置子元素行占線1到3的位置 -->grid-row:1/3;justify-self 設(shè)置子元素網(wǎng)格項(xiàng)水平對(duì)齊的方式 設(shè)置在子元素上

<!-- 這將使內(nèi)容占滿整個(gè)單元格的寬度 -->justify-self: stretch;<!-- 單元格左對(duì)齊 -->justify-self:start;<!-- 單元格居中 -->justify-self:center;<!-- 單元格右對(duì)齊 -->justify-self:end;align-self 設(shè)置子元素網(wǎng)格項(xiàng)垂直對(duì)齊的方式 設(shè)置在子元素上

<!-- 這將使內(nèi)容占滿整個(gè)單元格的寬度 -->align-self: stretch;<!-- 單元格左對(duì)齊 -->align-self:start;<!-- 單元格居中 -->align-self:center;<!-- 單元格右對(duì)齊 -->align-self:end;justify-items 設(shè)置所有網(wǎng)格元素水平對(duì)齊方式 設(shè)置在父元素上。
- 屬性值跟justify-self的屬性值一樣。

<!-- 單元格居中 -->justify-items:center;align-items 設(shè)置所有網(wǎng)格元素垂直對(duì)齊方式 設(shè)置在父元素上
- 屬性值跟align-self的屬性值一樣。

<!-- 單元格居中 -->align-items:center;grid-template-areas 將單元格每個(gè)部分都起一個(gè)名字進(jìn)行區(qū)域劃分。 設(shè)置在父元素上

就比如

grid-template-areas: "header header header" "advert content content" "advert footer footer";

這樣就表示這個(gè)3X3的網(wǎng)格中名為 header 占了頭部的三格。

grid-area 給子元素網(wǎng)格項(xiàng)進(jìn)行設(shè)置名字，把他的名字與之前設(shè)定的grid-template-areas進(jìn)行設(shè)定。

就比如

grid-area:header;

當(dāng)前元素就是名為header的子元素網(wǎng)格項(xiàng)，占了之前制定的網(wǎng)格頭部三格。
grid-area還有一個(gè)書寫方法，grid-area:1/2/3/4:
這里的4個(gè)數(shù)字依次分別代表 第 1 條水平網(wǎng)格線（起始）、第 2 條垂直網(wǎng)格線（起始）、第 3 條水平網(wǎng)格線（終止）、第 4 條垂直網(wǎng)格線（終止）。

網(wǎng)格布局單位:

絕對(duì)單位
px
相對(duì)單位
em % vw vh fr auto
fr :設(shè)置行或者列占剩余空間的比例。
auto:設(shè)置列寬或行高自動(dòng)等于它的內(nèi)容的寬度或高度

使用 repeat 方法指定行或列的重復(fù)次數(shù)，后面加上逗號(hào)以及需要重復(fù)的值。

就比如grid-template-columns:repeat(100,100px);相當(dāng)于分了100列，每一列都是100px。repeat(100,100px)第一個(gè)值是數(shù)量，第二個(gè)值是大小。

內(nèi)置函數(shù) minmax 也可用于設(shè)置 grid-template-columns 和 grid-template-rows 的值。 它的作用是在網(wǎng)格容器改變大小時(shí)限制網(wǎng)格項(xiàng)的大小。 為此，你需要指定網(wǎng)格項(xiàng)允許的尺寸范圍。 例如：

grid-template-columns: 100px minmax(50px, 200px);

在上面的代碼中，我們通過 grid-template-columns 添加了兩列，第一列寬度為 100px，第二列寬度最小值是 50px，最大值是 200px。

repeat 方法帶有一個(gè)名為自動(dòng)填充（auto-fill）的功能。 它的功能是根據(jù)容器的大小，盡可能多地放入指定大小的行或列。 你可以通過結(jié)合 auto-fill 和 minmax 來更靈活地布局。

repeat(auto-fill, minmax(60px, 1fr));

在第一個(gè)網(wǎng)格中，請(qǐng)使用 auto-fill 和 repeat 來填充網(wǎng)格。 其中列寬的最小值為 60px，最大值為 1fr。 你可以調(diào)整最右側(cè)的預(yù)覽區(qū)大小，查看自動(dòng)填充的效果。

auto-fit 效果幾乎和 auto-fill 一樣。 不同點(diǎn)僅在于，當(dāng)容器的大小大于各網(wǎng)格項(xiàng)之和時(shí)，auto-fill 會(huì)持續(xù)地在一端放入空行或空列，這樣就會(huì)使所有網(wǎng)格項(xiàng)擠到另一邊；而 auto-fit 則不會(huì)在一端放入空行或空列，而是會(huì)將所有網(wǎng)格項(xiàng)拉伸至合適的大小。

注意： 如果容器寬度不足以將所有網(wǎng)格項(xiàng)放在同一行，余下的網(wǎng)格項(xiàng)將會(huì)移至新的一行。