这是 CSS 布局实现方式之一。
它可以定义行列宽高什么的，将页面分布成不等大小块。
简单理解请参照 table 标签。
Grid 栅格系统：
它是一种约定式的排版方式。
以规则的网格阵列来指导和规范版面排布以及信息分布。
使用代码可以时限自动换行。IE浏览器使用样式tablelayoutfixed，引用内容为abcdefghigklmnopqrstuvwxyz1234567890。即可实现浏览器自动换行。
CSSGrid网格布局又称为Grid网格，是一个二维的基于网格的布局系统，它的目标是完全改变我们基于网格的用户界面的布局方式。CSS一直用来布局我们的网页，但一直以来都存在这样或那样的问题。
一开始我们用表格table，然后是浮动float，再是定位postion和内嵌块inline-block，但是所有这些方法本质上都是只是hack而已，并且遗漏了很多重要的功能例如垂直居中。
Flexbox的出现很大程度上改善了我们的布局方式，但它的目的是为了解决更简单的一维布局，而不是复杂的二维布局实际上Flexbox和Grid能协同工作，而且配合得非常好。Grid网格布局是第一个专门为解决布局问题而创建的CSS模块，只要我们一直在制作网站，我们就一直要讨论这些问题。
你好，楼主，您描述的问题就是一个容器加边比你固定的宽要多个（边X2）的大小。解决方法1：增加总模块容器宽度(原.grid_24 { width:950px}修改为.grid_24 { width:954px})
2：减少自身模块容器的宽度(原.grid_1 { width:30px}修改为.grid_1 { width:28px})
希望我的回答对你有帮助。@^_^@
