引用阮一峰老师话说网格布局(Grid)是最强大的 CSS 布局方案。CSS Grid 网格布局教程
它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了。
文章图片
上图这样的布局,就是 Grid 布局的拿手好戏。
Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。
Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大。
下面我给大家分享一个用grid实现的自适应9宫格,格子大小自定义,间隔不变,以前都是用dom计算,好蠢。
需要根据自己的布局个数,来计算每个格子大小,主要是每个格子的宽高减去相应行和列间隔的大小,以九宫格为列,有3行3列,有行间距2 24px, 有列间距2 24px,每个格子的宽高都要减去48px / 3。
grid - 锐客网 * {
padding: 0;
margin: 0;
box-sizing: border-box
}body {
height: 100vh;
padding: 20px;
}.container {
width: 100%;
height: 100%;
display: grid;
/*行间距*/
grid-row-gap: 24px;
/*列间距*/
grid-column-gap: 24px;
/*每3行有2个行间距,所以每个格子的宽高都要减去(24*2) / 3 */
grid-template-columns: repeat(3, calc(33.33% - 16px));
grid-template-rows: repeat(3, calc(33.33% - 16px));
overflow: hidden;
}.item {
background: #33a8a5;
}
文章图片
【CSS Grid 网格布局实现自适应9宫格】
文章图片