css布局之Grid布局

前言

最近了解到一种新的布局:grid布局(网格布局),grid并不是最近才看到的,以前在设置display的时候,会在属性值列表中看到,但却没有给过太多关注。一次偶然机会听到:对于九宫格布局的实现,grid布局会比flex布局实现起来更方便,作为flex深度使用者,这句话无疑引起了我强烈的欲望,想要对grid一探究竟。在了解后,才觉得grid功能真的很强大,目前只学习了个皮毛,在这里做个简单的记录。

grid与flex的区别

  1. 概念上
  • flex:又叫弹性布局,是一维布局;
  • grid:又叫网格布局,是二维布局;
  1. 使用上
  1. 浏览器兼容性上
  • 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的设置是不是更加简洁!
posted @ 2024-09-18 15:09  shellon  阅读(87)  评论(0编辑  收藏  举报