1.Gird布局基本概念
- 采用網(wǎng)格布局的區(qū)域被稱為容器，容器內(nèi)部所使用網(wǎng)格定位的子元素被稱為項(xiàng)目
<div> //容器
<div><p>1</p></div> //項(xiàng)目1
<div><p>2</p></div> //項(xiàng)目2
<div><p>3</p></div> //項(xiàng)目3
</div>
- 項(xiàng)目只能是容器的頂層子元素，不包含項(xiàng)目的子元素，比如上面代碼的<p>元素就不是項(xiàng)目诺舔。Grid 布局只對(duì)項(xiàng)目生效
-
Gird布局的行（row）和列（column）
image.png 單元格
-
行和列的交叉區(qū)域被稱為單元格
image.png
- 網(wǎng)格線
-
意為劃分網(wǎng)格的線（grid line）奉狈，水平網(wǎng)格線劃分出行卤唉，垂直網(wǎng)格線劃分出列
image.png
2.Gird容器屬性
- display屬性
- display：gird 指定一個(gè)容器使用網(wǎng)格布局
div {
display: grid;
}
- 設(shè)為網(wǎng)格布局以后，容器子元素（項(xiàng)目）的float仁期、display: inline-block桑驱、display: table-cell、vertical-align和column-*等設(shè)置都將失效
- grid-template-columns 屬性跛蛋；grid-template-rows 屬性
grid-template-columns 屬性定義網(wǎng)格每一列的寬度
gird-template-rows 屬性定義網(wǎng)格每一行的行高
/* 固定每一列的列寬和行高為100px熬的； */
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
/* 百分比列寬和行高，撐滿整個(gè)屏幕 */
.container {
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;
}
- repeat屬性值：repeat()接受兩個(gè)參數(shù)赊级，第一個(gè)參數(shù)是重復(fù)的次數(shù)（上例是3）押框，第二個(gè)參數(shù)是所要重復(fù)的值。
/* 使用repeat()函數(shù)簡(jiǎn)化重復(fù)值 */
.container {
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);
}
.container {
display: grid;
grid-template-columns: repeat(2, 100px 20px 80px);
}
/*
上面代碼定義了6列理逊；第一列和第四列的寬度為`100px`橡伞，第二列和第五列為`20px`盒揉，第三列和第六列為`80px`
*/
- repeat（）屬性值auto-fill 關(guān)鍵字：使用auto-fill關(guān)鍵字表示自動(dòng)填充
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
/*
上面代碼表示每列寬度100px，然后自動(dòng)填充兑徘，直到容器不能放置更多的列
*/
}
- fr 屬性值：方便表示比例關(guān)系
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
/*
上面代碼表示設(shè)置三個(gè)比例一樣刚盈，寬度相同的列
*/
- fr 屬性可以與絕對(duì)長(zhǎng)度的單位結(jié)合使用
.container {
display: grid;
grid-template-columns: 150px 1fr 2fr;
}
/*
上面代碼表示第一列為固定的150px像素寬度，第二列的寬度是第三列的一半
*/
- minmax（）函數(shù)：函數(shù)取值一個(gè)長(zhǎng)度范圍挂脑，表示長(zhǎng)度就在這個(gè)范圍之中藕漱；它接受兩個(gè)參數(shù)，分別為最小值和最大值
.container {
display: grid;
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
}
/*
上面代碼表示在整個(gè)屏幕寬度內(nèi)第一列與第二列等分最域，minmax(100px, 1fr)表示列寬不小于100px谴分，不大于1fr
*/
- auto屬性值：表示自適應(yīng)auto長(zhǎng)度
.container {
display: grid;
grid-template-columns: 100px auto 100px; /* 列自適應(yīng) */
grid-template-rows: 100px auto 100px; /* 行自適應(yīng) */
}
- 網(wǎng)格線的名稱
grid-template-columns屬性和grid-template-rows屬性里面，還可以使用方括號(hào)镀脂，指定每一根網(wǎng)格線的名字牺蹄，方便以后的引用
.container {
display: grid;
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
/*
指定每一根網(wǎng)格線的名稱
*/
- 布局實(shí)例
grid-template-columns 布局兩欄式網(wǎng)頁(yè)
.wrapper {
display: grid;
grid-template-columns: 70% 30%; /*代碼將左邊欄設(shè)為70%，右邊欄設(shè)為30% */
}
.wrapper {
display: grid;
grid-template-columns: repeat(12, 1fr); /* 十二網(wǎng)格布局*/
}
- 網(wǎng)格行列間距
grid-row-gap屬性設(shè)置行與行的間隔（行間距）薄翅；grid-column-gap屬性設(shè)置列與列的間隔（列間距）
.container {
grid-row-gap: 20px;
grid-column-gap: 20px;
}
grid-gap屬性是grid-column-gap和grid-row-gap的簡(jiǎn)寫形式 沙兰；gird-gap屬性簡(jiǎn)寫為gap
.container {
/*grid-gap: <grid-row-gap> <grid-column-gap>;*/
grid-gap: 20px 20px;
}
- grid-auto-flow網(wǎng)格排列順序?qū)傩?br> 網(wǎng)格默認(rèn)的放置順序是"先行后列"，先填滿第一行翘魄，再開始放入第二行鼎天；
.box{
grid-auto-flow: row;
}
這個(gè)順序由grid-auto-flow屬性決定，默認(rèn)值是row暑竟，即"先行后列"斋射，也可以將它設(shè)成column，變成"先列后行"
.box{
grid-auto-flow: column;
}
- grid-auto-flow（row dense和column dense屬性值）
設(shè)置grid-auto-flow屬性之前：
image.png
設(shè)置gird-auto-flow屬性之后：
.box{
grid-auto-flow: row dense;
}
image.png
.box{
grid-auto-flow: column dense;
}
image.png
- 容器單元格對(duì)齊屬性
- justify-items 屬性：justify-items屬性設(shè)置單元格內(nèi)容的水平位置（左中右）
.box{
justify-items: start | end | center | stretch;
}
- align-items 屬性：align-items屬性設(shè)置單元格內(nèi)容的垂直位置（上中下）
.box{
justify-items: start | end | center | stretch;
}
屬性值介紹：
* start：對(duì)齊單元格的起始邊緣但荤。
* end：對(duì)齊單元格的結(jié)束邊緣罗岖。
* center：?jiǎn)卧駜?nèi)部居中。
* stretch：拉伸腹躁，占滿單元格的整個(gè)寬度（默認(rèn)值）桑包。
place-items 屬性
place-items屬性是align-items屬性和justify-items屬性的簡(jiǎn)寫形式
.box{
place-items: <align-items> <justify-items>;
/*
如果省略第二個(gè)值，則瀏覽器認(rèn)為與第一個(gè)值相等
*/
}
- 容器對(duì)齊屬性
- justify-content屬性是整個(gè)內(nèi)容區(qū)域在容器里面的水平位置（左中右）
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
- align-content屬性是整個(gè)內(nèi)容區(qū)域的垂直位置（上中下）
.container {
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
- place-content屬性是justify-content和align-content的合并簡(jiǎn)寫
.box{
place-content: <align-content> <justify-content>
}
- grid-auto-columns 屬性纺非；grid-auto-rows 屬性
用來設(shè)置瀏覽器自動(dòng)創(chuàng)建的多余網(wǎng)格的列寬和行高哑了，如果不指定這兩個(gè)屬性，瀏覽器完全根據(jù)單元格內(nèi)容的大小烧颖，決定新增網(wǎng)格的列寬和行高
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-auto-rows: 50px;
/* 上面代碼指定新增的行高統(tǒng)一為50px（原始的行高為100px） */
}
image.png
3.項(xiàng)目屬性
- 項(xiàng)目定位屬性：
grid-column-start屬性：左邊框所在的垂直網(wǎng)格線
grid-column-end屬性：右邊框所在的垂直網(wǎng)格線
grid-row-start屬性：上邊框所在的水平網(wǎng)格線
grid-row-end屬性：下邊框所在的水平網(wǎng)格線
.item-1 {
grid-column-start: 2;
grid-column-end: 4;
}
image.png
- 這四個(gè)屬性的值弱左，除了指定為第幾個(gè)網(wǎng)格線，還可以指定為網(wǎng)格線的名字
.item-1 {
grid-column-start: header-start;
grid-column-end: header-end;
}
/* 上面代碼中炕淮，左邊框和右邊框的位置科贬，都指定為網(wǎng)格線的名字(header) */
*span 屬性值：表示"跨越"，即左右邊框（上下邊框）之間跨越多少個(gè)網(wǎng)格
.item-1 {
grid-column-start: span 2;
}
/* 上面代碼表示，1號(hào)項(xiàng)目的左邊框距離右邊框跨越2個(gè)網(wǎng)格 */
image.png
- grid-column 屬性榜掌；grid-row 屬性
- grid-column屬性是grid-column-start和grid-column-end的合并簡(jiǎn)寫形式
- grid-row屬性是grid-row-start屬性和grid-row-end的合并簡(jiǎn)寫形式
.item {
grid-column: / ;
grid-row: / ;
}
——————————————————————————————————————————————
.item-1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
3.justify-self 屬性；align-self 屬性 | place-self 屬性——單元格對(duì)齊屬性
- justify-self屬性設(shè)置單元格內(nèi)容的水平位置（左中右）乘综，跟justify-items屬性的用法一樣
- align-self屬性設(shè)置單元格內(nèi)容的垂直位置（上中下）憎账，跟align-items屬性的用法一樣
.item {
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
}
- 屬性值：
- start：對(duì)齊單元格的起始邊緣。
- end：對(duì)齊單元格的結(jié)束邊緣卡辰。
- center：?jiǎn)卧駜?nèi)部居中胞皱。
- stretch：拉伸，占滿單元格的整個(gè)寬度（默認(rèn)值）九妈。
.item-1 {
justify-self: start;
}
image.png
- place-self屬性是align-self屬性和justify-self屬性的合并簡(jiǎn)寫形式
.item-1 {
place-self: <align-self> <justify-self>;
place-self: center center;
}
