Appearance
grid 布局
一个简单的示例:
常见的容器属性
1. grid-template-*
1) repeat()
第一个参数是重复的次数,第二个参数是所要重复的值
css
grid-template-columns: 100px 100px 100px;
/* 等价于 */
grid-template-columns: repeat(3, 100px);
2) auto-fill
单元格大小固定,但容器的大小不确定,使用它会自动填充
css
grid-template-columns: repeat(auto-fill, 100px);
3) fr 片段
为了方便表示比例关系,网格布局提供了fr
关键字(fraction 的缩写,意为“片段”)
css
/* 宽度平均分为4分 */
grid-template-columns: repeat(4, 1fr);
/* 等价于*/
grid-template-columns: 1fr 1fr 1fr 1fr;
/* 改变比例 */
grid-template-columns: 1fr 2fr 3fr 1fr;
4) minmax()
css
/* 设置最小和最大宽度 */
grid-template-columns: 1fr minmax(150px, 1fr);
5) auto
css
/* auto 自适应宽度 */
grid-template-columns: 100px auto 100px;
6) 网格线
可以用方括号定义网格线名称,方便以后的引用(C 表示 columnmns)
css
/* 定义网格线名称,方便后面引用 */
grid-template-columns: [c1] 100px [c2] auto [c3] 100px [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] 100px [r4] 100px [r5];
2.gap
项目(子元素)相互之间的距离
css
/* 子元素间隔 */
row-gap: 20px;
column-gap: 30px;
/* 等价于 */
gap: 20px 30px;
3. grid-template-areas
将项目(子元素)按照自定义方式划分区域,不需要利用的区域可以用.
表示,区域的命名会影响网格线,每个区域的起始网格线会自动命名为区域名-start
,终止网格线自动命名为区域名-end
css
grid-template-areas: 'a a a' 'b a b' 'b b b';
4. grid-auto-flow
网格默认顺序为先行后列,属性可以修改为row
或者column
来改变网格排列顺序
同时还要一个属性dense
,意为密集排列
5.对齐方式
1) justify-items
设置单元格内的水平对齐方式:start
| end
| center
| stretch
2) align-items
设置单元格内的垂直对齐方式:start
| end
| center
| stretch
3) place-items
是 align-items 属性和 justify-items 属性的合并简写形式 place-items: <align-items> <justify-items>;
css
justify-items: center;
align-items: center;
/* 等效于 */
place-items: center center;
4) justify/align-content
设置整个内容区域的水平和垂直的对齐方式 justify-content: start
| end
| center
| stretch
| space-around
| space-between
| space-evenly
; align-content: start
| end
| center
| stretch
| space-around
| space-between
| space-evenly
;
5) grid-auto-rows/columns
用来设置多出来项目的宽和高
css
.main{
grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] 100px [r4] ;
···
grid-auto-rows: 50px;
}
常见的项目属性
1. grid-row/column-start/end
用来指定 item 的具体位置,根据在哪根网格线
css
.main {
display: grid;
border: #41d5f6 10px solid;
grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] 100px [r4] 100px [r5];
gap: 20px 20px;
/* 自定义网格区域 */
grid-template-areas: 'a a a' 'b a b' 'b b b';
}
.item-1 {
background-color: #ec5d3d;
grid-column-start: 1;
grid-column-end: 3;
/* 等效于 */
/* grid-column: 1 / 3 */
}
.item-2 {
background-color: #f1a145;
grid-column: 1/3;
}
.item-3 {
background-color: #64a256;
/* 等效于 */
grid-column-start: span 2;
}
2. grid-area
指定项目放在哪一个区域
grid-area 属性还可用作 grid-row-start/end、grid-column-start/end 的合并简写形式,直接指定项目的位置
3. justify/align/place-self
justify-self 属性设置单元格内容的水平位置(左中右),跟 justify-items 属性的用法完全一致, 但只作用于单个项目 (水平方向) align-self 属性设置单元格内容的垂直位置(上中下),跟 align-items 属性的用法完全一致, 也是只作用于单个项目 (垂直方向)