CSS Grid 网格布局实现自适应9宫格

引用阮一峰老师话说网格布局(Grid)是最强大的 CSS 布局方案。CSS Grid 网格布局教程
它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了。
CSS Grid 网格布局实现自适应9宫格
文章图片

上图这样的布局,就是 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宫格
文章图片

【CSS Grid 网格布局实现自适应9宫格】CSS Grid 网格布局实现自适应9宫格
文章图片

    推荐阅读