Grid局部,当该容器的元素,需要成行成列的排列时,适合使用Grid
有两种设置:
.grid-container {
display: grid;
}
.grid-container {
display: inline-grid;
}
gap = row-gap+column-gap
一、在外部容器上面,定义行和列
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 80px 200px;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}
但所有列的宽度之和不足整个Grid,可以决定每一列的位置
.grid-container {
display: grid;
justify-content: start;
grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
所有行的高度不足整个Grid的高度,可以排列行的位置
.grid-container {
display: grid;
height: 400px;
align-content: space-between;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
二、在内部元素上面,定义位置
grid-column: start column / end column +1
grid-row: start row / end row + 1
注意,可以设置span,推断出终止的行号和列号
grid-column: start column /span count
grid-row: start row / span count
简略写法:
grid-area: start column / end column / start row / end row
还有一种,结合命名,使用
.item1 {
grid-area: myArea;
}
.grid-container {
display: grid;
grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
标签:container,column,布局,start,grid,10px,Grid,CSS,row From: https://www.cnblogs.com/chenyingzuo/p/16965915.html