IT兄弟连 HTML5教程 栅格布局 栅格

说到栅格布局，可能有些读者不太清楚。不过说到栅格，脑子里总会有相应的一些画面，比如：

图1  原始栅格图

图1上显示的就是以前人为了保护某部份土地，特意用竹子包围起该块土地。我们把这种编织筑起的竹子围栏就称之为篱笆或栅格。不管之前有没有了解过栅格的读者们，相信看了图5.1所示，会对栅格这个词有一个概念，就是用竹、木、铁条等按照一定规律做成的阻拦物。我们可以随意的编织不同类型的规律，可以做出菱形的、规矩的方型的、X型的、圆形等等。

不过，在网页中，我们在众多栅格类型规律中，选择其中最经典的一款进行模仿，如图2所示。

图2  经典款栅格图

之所以称它为栅格中的经典款，就是因为它只是需要简单的行列垂直水平相交就可以达到即整齐美观又防御的效果。

所以，我们在网页中也可以选择这种通过简单的行列垂直水平相交就可以达到一个页面美观的效果，而且栅格化布局还可以很方便适配div盒子所占宽度的比例，我们一般用grid进行命名。通过栅格布局这种结构，可以方便我们组织内容、易于浏览网站、降低用户端负载。那么现在我们就可以引入两个概念：行“row”和列“column”。

原文地址：https://www.cnblogs.com/itxdl/p/12117893.html