1. 控制整个内容区域位置,就是在父元素里哪个位置绘制内容
写在父级元素(display:grid 同级)
- justify-content
align-content
start | end | center | stretch 项目大小没有指定时,拉伸占据整个网格容器。 | space-around | space-between | space-evenly;
justify-content
属性是整个内容区域
在容器里面的水平位置(左中右)
align-content
属性是整个内容区域
的垂直位置(上中下)。
eg:
<div class="bottom">
<div class="item">1</div>
123
<div class="item">2</div>
</div>
.bottom {
display: grid;
align-content: center;
justify-content: center;
.item {
background-color: #0e9aac;
width: 200px;
height: 40px;
}
}
2. 控制子元素在单元格中的位置
写在父级
- justify-items
align-items
start | end | center | stretch 拉伸,占满单元格的整个宽度(默认值)
eg:
3. 控制单个项目
在单元格中的位置
写在子元素
- justify-self
align-self
start | end | center | stretch;
4. 划分网格,定义列宽,行高
写在父元素
- grid-template-columns :定义列宽,给定几个参数,就把块分为几列。
grid-template-rows :定义行高,给定几个参数,就定义这几行的行高,剩下的行为原始值
取值: px单位,百分数,repeat(3,33%),repeat(auto-fill, 100px),fr比例,
auto : 根据内容撑开
,minmax,fit-content(500px)
.container {
display: grid;
grid-template-columns: repeat(3, 33.33%); // 3份,每份33.33%
grid-template-columns: repeat(auto-fill, 100px); // 每份100px,自动填充并换行直到容器放不下
grid-template-columns: repeat(auto-fit, 100px); // 每份100px,自动填充并换行直到容器放不下
grid-template-columns: 1fr 2fr; // fr为片段简写,表示前者为前者的两倍
grid-template-columns: 150px 1fr 2fr; // 第一列的宽度为150像素,第二列的宽度是第三列的一半。
grid-template-columns: 100px auto 100px; // auto关键字表示由浏览器自己决定长度,默认占满
grid-template-rows: fit-content(500px) // 行高会根据内容自动调整,但不超过500px
}
5. 间距
- grid-row-gap :行间距
grid-column-gap :列间距
6. auto-fill,auto-fit 的区别。实现行空间平分布局
- auto-fill :会把行,全部划分为
参数宽度
单元格,没有内容保持格子为空
.wrapper{
width: 100%;
display: grid;
justify-content: space-evenly;
grid-template-columns: repeat(auto-fill, 100px);
.item {
width: 100px;
height: 90px;
}
}
所以,在操作子项目时,它是以所有的格子为子项目来操作,而不是我们写的div,图中div只有4个
如图:justify-content: space-around时,是以所有的格子为单位,而不是四个div
- auto-fit :会把行,有几个子项目,就划几个
参数宽度
的格子,其余空间不划分
.wrapper{
width: 100%;
display: grid;
justify-content: space-evenly;
grid-template-columns: repeat(auto-fit, 100px);
.item {
width: 100px;
height: 90px;
}
}
如图:只划分了四个格子,所以在操作格子时,相当于在操作子项目,
如图:justify-content: space-around时,也是以所有的格子为单位,但是这里格子即子项目
所以行空间平分布局
父 {
display: grid;
grid-template-columns: repeat(auto-fit, 100px);
justify-content: space-between;
}