css布局之Grid布局
前言
最近了解到一种新的布局:grid布局(网格布局),grid并不是最近才看到的,以前在设置display的时候,会在属性值列表中看到,但却没有给过太多关注。一次偶然机会听到:对于九宫格布局的实现,grid布局会比flex布局实现起来更方便
,作为flex深度使用者,这句话无疑引起了我强烈的欲望,想要对grid一探究竟。在了解后,才觉得grid功能真的很强大,目前只学习了个皮毛,在这里做个简单的记录。
grid与flex的区别
- 概念上
- flex:又叫弹性布局,是一维布局;
- grid:又叫网格布局,是二维布局;
- 使用上
- flex:实现九宫格的效果,在某些场景下需要做特殊处理,可以参考我之前的笔记(flex 布局下 space-between/space-around 的使用 );
- grid:可以很容易的实现,而不需要做特殊处理;
- 浏览器兼容性上
- flex:IE10更早的版本不支持,IE10使用
-ms-
前缀,UC浏览器使用-webkit-
前缀; - gird:IE10更早的版本不支持,IE10到 Edge15 的版本,使用的是早期规范,可以使用
-ms
属性实现简单的网格布局,呈现效果会与现行的规范有一定的差异。可以通过@support (display: grid)
做样式的兼容处理,对于支持grid的浏览器,使用网格布局;对于不支持的旧浏览器,使用流布局。
grid 实现九宫格
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px;
gap: 20px;
}
- grid-template-columns: 设置网格的列轨道。repeat表示重复,第一个参数是重复的次数,第二个参数是要重复的内容,fr是等分。repeat(3, 1fr)即设置页面为3列,3列均分当前页面宽度。
- grid-auto-rows: 设置行高。
- gap: 设置行和列间距。
相比flex,grid的设置是不是更加简洁!