简介
- 使用
grid-area
一般搭配grid-template-areas
一起使用,详情点击,并搜索在网格布局中自定义摆放元素
justify-self/align-self
一般用于项目在容器内的排放位置
例子
grid-area
- 这里指介绍作为简写的
grid-area
,非简写形式的使用我们可以看简介中的文章 - 作为先写形式,他是
grid-row-start
、grid-row-end
、grid-column-start
、grid-column-end
的合并简写,语法如下
grid-area:<grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>
例子
<body>
<style>
* {
list-style: none;
margin: 0;
padding: 0;
}
ul {
width: 600px;
height: 600px;
border: 3px solid rebeccapurple;
font-weight: bold;
color: white;
text-align: center;
line-height: 100px;
font-size: 40px
}
li:nth-child(even) {
background-color: red;
}
li:nth-child(odd) {
background-color: #000000;
}
ul{
display: grid;
grid-template-rows: repeat(3,1fr);
grid-template-columns: repeat(3,1fr);
gap: 20px 10px;
}
li:nth-child(1) {
grid-area: 1/1/3/3;
}
</style>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
效果如下
根据grid-area
属性值,我们就可以看到项目序号为1的盒子占据了4个空间
justify-self/align-self
- 他们的属性值可取如下
start | end | center | stretch
justify-self
用于调整水平方向上面的布局,如果用上了当前的属性,那么水平方向上的align-self
用于调整垂直方向上面的布局- 项目只要用上了这个属性,那么项目的大小就是有内容撑开,或者自定义的大小
- 这两个有一个单独的缩写属性就是
start
ul{
display: grid;
grid-template-rows: repeat(3,1fr);
grid-template-columns: repeat(3,1fr);
gap: 20px 10px;
}
li:nth-child(1) {
justify-self: start;
align-self: start;
}
end
ul{
display: grid;
grid-template-rows: repeat(3,1fr);
grid-template-columns: repeat(3,1fr);
gap: 20px 10px;
}
li:nth-child(1) {
justify-self: end;
align-self: end;
}
center
ul{
display: grid;
grid-template-rows: repeat(3,1fr);
grid-template-columns: repeat(3,1fr);
gap: 20px 10px;
}
li:nth-child(1) {
justify-self: center;
align-self: center;
}
stretch
ul{
display: grid;
grid-template-rows: repeat(3,1fr);
grid-template-columns: repeat(3,1fr);
gap: 20px 10px;
}
li:nth-child(1) {
/* 水平方向拉伸 */
justify-self: stretch;
/* 垂直方向拉伸 */
align-self: center;
}
placeself
这个属于justify-self和align-self的缩写,他的摆放是先水平,然后再垂直
li:nth-child(1) {
/* 水平方向拉伸 */
justify-self: stretch;
/* 垂直方向拉伸 */
align-self: center;
}
可以写成
li:nth-child(1) {
place-self: stretch stretch;
}