grid布局

开源

个人开源的leno-admin后台管理项目，前端技术栈：reactHooks、ant-design；后端技术栈：koa、mysql、redis，整个项目包含web端、electron客户端、mob移动端、template基础模板，能够满足你快速开发一整套后台管理项目；如果你觉得不错，就为作者点个✨star✨吧，你的支持就是对我最大的鼓励；

演示地址

文档地址

源码github地址

-- grid布局为网格状布局，是css的一种功能强大的页面布局模式，其的核心思想是将网页分成类似于围棋一样的一个个小方格，我们可以随意X，Y轴的合并这些小方格，以达到我们想要的网页布局雏形。

-- grid布局时css样式中最强大的布局方案，是现在css中唯一一种二维布局方案，flex布局时一维布局方案👇👇

基本布局概念：

🥬 基本概念--
容器container： 元素设置display:grid转化为grid布局，里面的子元素为item；
行row： X轴为行；
行间距： 子元素item之间的间隙；
列column： Y轴为列；
区域area： 我们自己合并X与Y轴的item子元素组合成的；
item： grid布局里的子元素都称之为item；

01-display

display：inline-grid 设置为行内元素grid布局，不独占一行； grid 设置行内块元素grid布局，独占一行；

对比图如下：

代码如下：

     .father {
            display: grid;
            /* display: inline-grid; */
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
        }

02- grid-template-columns&grid-template-rows

grid-template-columns: 100px 100px 100px;=> 表示纵轴设置三个item，并且每个的Y轴长度为100px； grid-template-columns: 100px 100px 100px;=> 表示纵轴设置三个item，并且每个的Y轴长度为100px；

为了便于理解直接上图：

repeat()： 函数可设置重复的值，或者重复的一个模式；

            /* 重复一个值 */
            /* grid-template-columns: repeat(3, 100px);
            grid-template-rows: repeat(3, 100px); */
            /* 重复一个模式 */
            grid-template-columns: repeat(3, 100px 50px);
            grid-template-rows: repeat(3, 100px 50px);

auto & fr： auto的作用类似于flex布局；fr的作用类似于flex中的flex=1；

            display: grid;
            width: 500px;
            /* 左右列150px，中间列自适应 */
            grid-template-columns: 100px auto 100px;
            /* 一行行高 300px*/
            grid-template-rows: repeat(1, 300px);

         display: grid;
         width: 500px;
         grid-template-columns: 1fr 3fr 1fr;
         grid-template-rows: 300px;

03 grid-gap ~ 格子间距

grid-row-gap: 10px;=> 表示row方向间距；
grid-column-gap: 10px;=> 表示column方向间距；
grid-gap: 5px 22px;=> 表示grid-gap: grid-row-gap grid-column-gap

04 grid-auto-flow ~ 格子排列方向

默认是grid-auto-flow：row；如果要改编为column列轴的话，设置：grid-auto-flow: column; ；

效果如下图👇

05 justify-items & align-items & place-items

设置给父元素，控制子元素里面的内容在小格子内的排列方向，默认回把元素转换为inline
justify-items: center;=> 表示column方向的start-center-end；
align-items: center;=> 表示row方向的start-center-end；
place-items: align-items justify-items;=> 连写方式；

效果如下图👇

06 justify/align-content

justify/align-content:=> 控制容器内的content内容的方向排列
place-content: align-content justify-content=> 连写属性
可选属性

元素名	内容解释
start	对齐grid容器的起始边框
end	对齐grid容器的结束边框
center	grid容器内部居中
stretch	grid容器内容大小没有指定时，拉伸占满grid容器
space-around	每个子元素两侧间隔相等，子元素之间间隔比容器边框的间隔大一倍
space-between	子元素之间间隔相等，子元素与容器边框没有间隔
space-evenly	子元素之间间隔相等，子元素与容器边框之间也是同样长度的间隔

07 grid-column & grid-row ~ 控制子元素

该属性设置给子元素本身
grid-column-start/end => start和end是占分份量从第几份开始到第几份结束column轴
grid-row-start/end => 这个是row轴的属性设置
连写：grid-column/row => 简写格式:用/分割，grid-column:1/4

效果如下图👇

08 justify/align-self ~ 控制子元素

该属性设置给子元素本身
justify-self: center; => 设置子元素在column轴上的位置，常设属性：start-center-end
align-self: center; => 设置子元素在row轴上的位置，常设属性：start-center-end
连写：place-self: end start; => 第一个值：align-items 第二个值：justify-items;

效果如下图👇

09 grid布局浏览器兼容情况

效果如下图👇

结语

本人在日常中也很少使用grid布局，grid的布局虽然是css最强大的布局方式，但是在兼容性上还是比较flex布局要差上少许；但是我相信未来grid布局会随着事件成为主流布局方式，以上文章分享皆是我的浅薄理解，如果不恰之处，望大家多多指出，谢谢~