前言： iPhone13發(fā)布會(huì)被占領(lǐng)了熱搜，小編就去逛了逛蘋果官網(wǎng)，發(fā)現(xiàn)樣式里有 grid 屬性，就去查了查，完整的 阮一峰 CSS Grid 網(wǎng)格布局教程 獻(xiàn)給大家~

通篇看下來(lái)跟 flex 布局很相像，但更強(qiáng)大一些。本人只是個(gè)人學(xué)習(xí)的筆記，如果有小白想系統(tǒng)的學(xué)習(xí) Grid 網(wǎng)格布局 建議戳上面的鏈接去看阮一峰的文~

1. 父級(jí)容器屬性

效果圖

display: grid; // 像display: block
display: inline-grid; // 像display: inline-block

grid-template-columns: 100px 100px 100px; // 屬性定義每一列的列寬 (絕對(duì)單位 百分比都可)
grid-template-rows: 100px 100px 100px; // 屬性定義每一行的行高 (絕對(duì)單位 百分比都可)
// 或
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);

grid-template-columns: repeat(2, 100px 20px 80px); // repeat()重復(fù)某種模式也可

grid-template-columns: repeat(auto-fill, 100px); // 單元格的大小是固定的，但是容器的大小不確定。如果希望每一行（或每一列）容納盡可能多的單元格，這時(shí)可以使用auto-fill關(guān)鍵字表示自動(dòng)填充。

grid-template-columns: 1fr 1fr; // 比例關(guān)系 后者是前者的兩倍

grid-template-columns: 1fr 1fr minmax(100px, 1fr); // 函數(shù)產(chǎn)生一個(gè)長(zhǎng)度范圍 最小值和最大

grid-template-columns: 100px auto 100px; // auto關(guān)鍵字表示由瀏覽器自己決定長(zhǎng)度。

grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; // 給網(wǎng)格命名
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4]; // 給網(wǎng)格命名

間隙

row-gap: 20px; // 設(shè)置行與行的間隔（行間距）
column-gap: 20px; // 設(shè)置列與列的間隔（列間距）
gap: <grid-row-gap> <grid-column-gap>; // 合并簡(jiǎn)寫
// 如果省略第二個(gè)值，則瀏覽器認(rèn)為與第一個(gè)值相等。

縱向

grid-auto-flow: column; // 縱向排列
justify-items: start | end | center | stretch; // 單元格內(nèi)容的水平位置（左中右）
align-items: start | end | center | stretch; // 單元格內(nèi)容的垂直位置（上中下）
place-items: <align-items> <justify-items>; // 如果省略第二個(gè)值，則瀏覽器認(rèn)為與第一個(gè)值相等。

justify-content: start | end | center | stretch | space-around | space-between | space-evenly; // 整個(gè)內(nèi)容區(qū)域在容器里面的水平位置（左中右）
align-content: start | end | center | stretch | space-around | space-between | space-evenly;  // 整個(gè)內(nèi)容區(qū)域的垂直位置（上中下）
place-content: <align-content> <justify-content> // 如果省略第二個(gè)值，則瀏覽器認(rèn)為與第一個(gè)值相等。

指定位置

// grid-auto-columns屬性和grid-auto-rows屬性用來(lái)設(shè)置，
// 瀏覽器自動(dòng)創(chuàng)建的多余網(wǎng)格的列寬和行高。
// 它們的寫法與grid-template-columns和grid-template-rows完全相同。
// 如果不指定這兩個(gè)屬性，瀏覽器完全根據(jù)單元格內(nèi)容的大小，決定新增網(wǎng)格的列寬和行高。
grid-auto-rows: 50px; 

grid-template: <grid-template-columns> <grid-template-rows> <grid-template-areas>
grid: <grid-template-rows> <grid-template-columns> <grid-template-areas> <grid-auto-rows> <grid-auto-columns> <grid-auto-flow>

2. 子集項(xiàng)目屬性

grid-column-start: 2; // 左邊框所在的垂直網(wǎng)格線
grid-column-end: 4; // 右邊框所在的垂直網(wǎng)格線
grid-row-start: 2; // 上邊框所在的水平網(wǎng)格線
grid-row-end: 4; // 下邊框所在的水平網(wǎng)格線

grid-column-start: span 2; // 這四個(gè)屬性的值還可以使用span關(guān)鍵字，表示"跨越"，即左右邊框（上下邊框）之間跨越多少個(gè)網(wǎng)格

grid-column: <grid-column-start> / <grid-column-end>;
grid-row: <grid-row-start> / <grid-row-end>;

grid-area: e; // 指定項(xiàng)目放在哪一個(gè)區(qū)域
grid-area: <row-start> / <column-start> / <row-end> / <column-end>; // 還可以作為縮寫

justify-self: start | end | center | stretch(拉伸 默認(rèn)值); // 屬性設(shè)置單元格內(nèi)容的水平位置（左中右）
align-self: start | end | center | stretch; // 屬性設(shè)置單元格內(nèi)容的垂直位置（上中下）
place-self: <align-self> <justify-self>; // 如果省略第二個(gè)值，則瀏覽器認(rèn)為與第一個(gè)值相等。