PS:整理自 阮一峰 CSS Grid 网格布局教程 后续会加上自己练习内容。
一、容器属性
- 1.
display: grid;
&display: inline-grid;
指定一个容器采用网格布局 PS:默认容器元素都是块级元素 - 备注a 网格布局,float、display:inline-block、display:table-cell、vertical-align和column-*等设置都将失效
- 2.grid-template-columns&grid-template-rows 属性定义每一列的列宽&属性定义每一行的行高
- 备注b 单位可以使用 绝对单位 百分比
-
repeat() 1).简化重复的值 例:
grid-template-rows: repeat(3, 33.33%)
PS:接受两个参数,第一个参数是重复的次数,第二个参数是所要重复的值
2).重复某种模式 例:grid-template-columns: repeat(2, 100px 20px 80px)
-
auto-fill 关键字表示自动填充 例:
grid-template-columns: repeat(auto-fill, 100px)
-
fr 关键字 表示比例关系,如果两列的宽度分别为1fr和2fr,就表示后者是前者的两倍
例:grid-template-columns: 1fr 1fr
PS: fr可以与绝对长度的单位结合使用,非常方便grid-template-columns: 150px 1fr 2fr
-
minmax() 表示长度就在这个范围之中。例:
grid-template-columns: 1fr 1fr minmax(100px, 1fr)
-
auto 关键字 表示浏览器自己决定长度。例:
grid-template-columns: 100px auto 100px
-
网格线的名称 PS:
grid-template-columns
属性和grid-template-rows
属性里面,还可以使用方括号,指定每一根网格线的名字
例:grid-template-columns:[c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4]
-
布局实例
两列布局display: grid; grid-template-columns: 70% 30%;
十二网格布局grid-template-columns: repeat(12, 1fr)
- 3.row-gap 行间距 column-gap 列间距 例:
row-gap: 20px;column-gap: 20px;
gap是row-gap和column-gap合并简写形式gap: <row-gap> <column-gap>
- 4.grid-template-areas 定义区域
display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px;grid-template-areas: 'a a a' 'b b b' 'c c c';
-
某些区域不需要利用,使用"点"
.
表示 - 5.grid-auto-flow 划分网格后,容器子元素排列顺序。PS:默认会先行后列
-
grid-auto-flow: row
先行后列grid-auto-flow: column
先列后行 -
PS:设置成
grid-auto-flow: row dense;
或grid-auto-flow: column dense
当布局按照原先情景时会遇到空格,添加dense之后,会尽可能紧密填满,不出现空格。 - 6.justify-items 设置单元格内容的水平位置排列(左中右) & align-items 设置单元格内容的垂直位置(上中下)
- 例:
justify-items: start | center | end | stretch; align-items: start | center | end | stretch;
-
place-items属性是
align-items
属性和justify-items
属性的合并简写形式 -
place-items: <align-items> <justify-items>
- 7.justify-content 整个内容区域在容器里面的水平位置(左中右) & align-content 整个内容区域的垂直位置(上中下)
- 例:
justify-content: start | center | end | stretch | space-around | space-between | space-evenly
align-content: start | center | end | stretch | space-around | space-between | space-evenly
-
start 对齐容器的起始边框
-
end 对齐容器的结束边框
-
center 容器内部居中
-
stretch 项目大小没有指定时,拉伸占据整个网格容器
-
space-around 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍。
-
space-between 项目与项目的间隔相等,项目与容器边框之间没有间隔
-
space-evenly 项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔
-
place-content属性是
align-content
属性和justify-content
属性的合并简写形式 -
place-content: <align-content> <justify-content>
PS: 如果省略第二个值,浏览器就会假定第二个值等于第一个值 - 8.grid-auto-columns和grid-auto-rows用来设置,浏览器自动创建的多余网格的列宽和行高。
- PS: 如果不指定这两个属性,浏览器完全根据单元格内容的大小,决定新增网格的列宽和行高
- 例:
display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px;grid-auto-rows: 50px;
- 9.
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
这六个属性的合并简写形式。PS: 不推荐使用简写
二、项目属性
- 1.
grid-column-start
属性:左边框所在的垂直网格线 grid-column-end
属性:右边框所在的垂直网格线grid-row-start
属性:上边框所在的水平网格线grid-row-end
属性:下边框所在的水平网格线- 例:
.item-1 {grid-column-start: 2;grid-column-end: 4;}
- 例:设置了dense
.item-1 {grid-column-start: 1; grid-column-end: 3; grid-row-start: 2; grid-row-end: 4;}
- 指定网格线名字设置:
.item-1 {grid-column-start: header-start;grid-column-end: header-end;}
span
关键字表示"跨越",即左右边框(上下边框)之间跨越多少个网格.item-1 {grid-column-start: span 2;}
.item-1 {grid-column-end: span 2;}
这个效果和上面一样的- 2.
grid-column
&grid-row
分别是grid-column-start
和grid-column-end
&grid-row-start
和grid-row-end
的合并简写形式 - 语法:
.item {grid-column: <start-line> / <end-line>; grid-row: <start-line> / <end-line>}
- 例:
.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;}
- 例2:
.item-1 {background: #b03532; grid-column: 1 / 3; grid-row: 1 / 3;}
- 等同于:
.item-1 {background: #b03532; grid-column: 1 / span 2; grid-row: 1}
- 注:斜杠以及后面的部分可以省略,默认跨越一个网络
- 3.
grid-area
指定项目放在哪一个区域.item-1 { grid-area: e; }
PS: item-1位于名字是e
区域 grid-area
属性还可用作grid-row-start
、grid-column-start
、grid-row-end
、grid-column-end
的合并简写形式.item {grid-area: <row-start> / <column-start> / <row-end> / <column-end>;}
- 4.
justify-self
属性设置单元格内容的水平位置(左中右) &align-self
属性设置单元格内容的垂直位置(上中下) -
start: 对齐单元格的起始边缘
-
end:对齐单元格的结束边缘
-
center:单元格内部居中
-
stretch:拉伸,占满单元格的整个宽度(默认值)
place-self
属性是align-self
属性和justify-self
属性的合并简写形式- 如果省略第二个值,
place-self
属性会认为这两个值相等 place-self: <align-self> <justify-self>
- 例:
.item-1 {justify-self: start;}
place-self: center center;
三、圣杯&双飞翼布局(grid)
-
说明:圣杯布局&双飞翼布局都是实现一个两侧宽度固定,中间宽度自适应的三栏布局。
-
html
<section className="main"> <div className="left">left</div> <div className="center">111</div> <div className="right">right</div> </section>
-
css
.main { display: grid; grid-template-rows: 300px; grid-template-columns: 100px auto 100px; grid-template-areas: 'a b c'; } .main .left { background: #00f; } .main .center { background: #f00; grid-area: b; } .main .right { background: #00f; }
-
效果图
四、九宫格布局
-
html
<section className="main"> <div className="child">1</div> <div className="child">2</div> <div className="child">3</div> <div className="child">4</div> <div className="child">5</div> <div className="child">6</div> <div className="child">7</div> <div className="child">8</div> <div className="child">9</div> </section>
-
css
.main { display: grid; grid-template-rows: 120px 120px 120px; grid-template-columns: 120px 120px 120px; row-gap: 20px; /* 行间距 */ column-gap: 20px; /* 列间距 */ grid-auto-flow: column; /* 先列后行 */ } .child { background: #f00; color: #fff; }
-
效果图
五、grid-column-start 等属性练习
说明:包含grid-template-* gap grid-auto-flow place-content ....等
-
html
<section className="main"> <div className="child">1</div> <div className="child">2</div> <div className="child">3</div> <div className="child">4</div> <div className="child">5</div> <div className="child">6</div> <div className="child">7</div> <div className="child">8</div> <div className="child">9</div> </section>
-
css
.main { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; gap: 10px 10px; grid-auto-flow: row dense; /* 设置子元素排列顺序 dense 子元素先按照排列 然后空的填满 */ place-content: start start; /* 设置整个内容区域在容器的位置 */ grid-auto-rows: 50px; /* 设置多余网格的行高 */ } .child { background: #f00; } .child:first-child { grid-column-start: 2; /* 垂直网格线来定义位置使用 */ grid-row-start: 2; /* 水平网格线来定义位置使用 */ grid-column-end: 4; grid-row-end: 4; }
-
效果图