布局Grid 布局及网格布局，是一种新的 css 模型，个别是将一个页面划分成几个次要的区域，定义这些区域的大小、地位和档次等关系，是目前惟一一种 css 二维布…

grid布局,在less文件里写grid-column:1/6，会主动被计算成0.16。解决办法:1.应用1/span 62.应用~”1/6″

写给自己看的display: grid布局教程CSS TricksCSS Grid 布局完全指南(图解 Grid 详细教程)

它将网页划分成一个个网格，可以任意组合不同大小的网格，做出各种各样的布局。如上面的图，正是Grid布局的应用，还有比如 管理系统的主页 dashboard，正是应用了grid布局实现的。

本文只列出flex及grid布局的一些基本概念及新增属性，用于自检对相关知识的掌握程度。具体教程及实例还请参考文末的引用文献。

如果pc端的两列布局、表格布局、圣杯布局等已经让你心力交瘁！那么移动端更加五花八门的布局肯定也是让你吃尽苦头！table不知道你用过没？bootstrap用过没？antd用过没？

Grid 布局是二维的基于网格的布局系统，它可以同时处理列和行（这是对比flex弹性盒模型布局而言）；第一个专门为解决布局问题而生的CSS模块。

牧羊人很擅长照顾他们的羊群，为牧群带来秩序和结构。即使有几百只毛茸茸的动物，牧羊人仍然会在一天结束时将它们悉数带回农场。

阮一峰的网格布局（grid）教程于3月25号发布,正好学习一波grid布局。虽然grid布局还不能够支持商用,扩展一下知识面也是好的。

在上篇——JavaScript五十问——对比来说CSS的Grid与FlexBox（上篇），我介绍了Flex的属性与使用，今天我们来总结一下Grid的具体使用方法，最后会结合Flex与Grid布局讲一讲二者的联系与不同。