一、Grid网格布局概述Grid网格布局它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。Grid 布局则是将容器划分成”行”和”列”,产生单元格,然后指定”项目所在”的单元格,可以看作是二维布局。Grid布局远比 Flex 布局强大。Grid网格布局它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。Grid 布局则是将容器划分成”行”和”列”,产生单元格,然后指定”项目所在”的单元格,可以看作是二维布局。Grid布局远比 Flex 布局强大
二、Grid网格布局基本概念1.采用网格布局的区域,称为”容器”(container)。容器内部采用网格定位的子元素,称为”项目”(item)。
注意:项目只能是容器的顶层子元素,不包含项目的子元素,Grid 布局只对项目生效。
2.容器里面的水平区域称为”行”(row),垂直区域称为”列”(column)。
行和列的交叉区域,称为”单元格”(cell)。
3.正常情况下,n行和m列会产生n x m个单元格。
4.划分网格的线,称为”网格线”(grid line)。水平网格线划分出行,垂直网格线划分出列。
正常情况下,n行有n + 1根水平网格线,m列有m + 1根垂直网格线,比如三行就有四根水平网格线。
上图是一个 4 x 4 的网格,共有5根水平网格线和5根垂直网格线。
三、grid属性值序号
属性值
说明
1
grid-template-columns
轨道列宽
2
grid-template-rows
轨道行高
3
gap
轨道间距
4
grid-auto-flow
隐式轨道排列方式,默认行优先
5
grid-auto-rows
隐式轨道行高
6
grid-auto-columns
隐式轨道列宽
grid项目属性属性
描述
grid-area
网格定位
实例
grid3行4列布局演示*{
margin:0;
padding:0;
box-sizing:border-box;
}
/* grid容器属性 */
.container{
width:25em;
margin:1emauto;
/* 转换为grid网格容器 */
display:grid;
/* 设置3行4列布局 */
grid-template-rows:1fr1fr1fr;
grid-template-columns:1fr1fr1fr1fr;
}
/* grid容器项目 */
.container.item{
background-color:red;
border:2pxsolid#8B4513;
padding:.3em;
margin:.6em;
}
item1
item2
item3
item4
item5
item6
item7
item8
item9
item10
item11
item12