摘要：实现让我们来亲自实现一个栅格化系统，假设我们要将一行划分为等分，那等分就占有的宽度。一个栅格化系统就这样实现了。
更多技术文章 什么是栅格化
在一个有限的、固定的平面上，用水平线和垂直线（虚拟的线，“参考线”），将平面划分成有规律的一系列“格子”（虚拟的格子），并依托这些格子、或以格子的边线为基准线，来进行有规律的版面布局。
通俗点来说，就是人为的把网页中的一行，等比例划分,比如将一行划分为 12 等分。然后在每个格子里进行页面开发，这就栅格化。
假如在页面里定义了一个 DIV，并设置如下 CSS 属性：
div {
border: 1px solid #ffffd;
height: 200px;
width: 100%;
}
页面上将会展示一个带有灰色边框的，宽度 100% 的矩形。如果手动控制浏览器放大缩小，此 DIV 也会相应的放大缩小，但宽度始终是 100%。
如果在页面定义了两个 DIV，并设置如下 CSS 属性：
body {
font-size: 0; // 将inline-block布局两个DIV之间的距离清除
}
div {
height: 200px;
border: 1px solid #ffffd;
width: 50%;
display: inline-block;
box-sizing: border-box;
vertical-align: top; // 顶部对齐
}
页面上将会有两个宽度各占 50% 的 DIV，如果页面放大或缩小，这两个 DIV 都会始终保持着页面 50% 的宽度。
相信到这里，应该有人看出来了，这就是栅格化，只不过第一个例子是将一行划分为 1 等分，即只有一个格子。
第二个例子将一行划分为 2 等分，即有两个格子。如果我将一行划分为 12 等分，那就跟 bootstrap 中的栅格化系统一模一样了，有 12 个格子。
让我们来亲自实现一个栅格化系统，假设我们要将一行划分为 12 等分，那 1 等分就占有 100% / 12 = 8.33% 的宽度。
相应的 CSS 可以这样设置：
.col1 {width: 8.33%}
.col2 {width: 16.66%}
.col3 {width: 25%}
.col4 {width: 33.33%}
.col5 {width: 41.66%}
.col6 {width: 50%}
.col7 {width: 58.33%}
.col8 {width: 66.66%}
.col9 {width: 75%}
.col10 {width: 83.33%}
.col11 {width: 91.66%}
.col12 {width: 100%}
上一个完整的示例来看看吧：
Title
最后呈现出来的效果是这样的。
怎么样？是不是很简单。
进阶结合 @media 媒体查询，我们可以做得更多。@media 详情请看MDN
相信用过 bootstrap 栅格化系统的都知道，在 bootstrap 栅格化系统中，有一些 col-md col-sm 属性，它们是干什么用的呢？
其实，它们都是栅格化系统的 CSS 类名，只是针对了不同的屏幕宽度。
假如我们有这样的一个需求：
在 PC 上，因为屏幕比较大，我们要求一行显示 4 列的内容。但是在手机上，因为屏幕比较小，要求一行显示 3 列的内容。
即一个网站同时适配 PC 和手机端，根据不同的端自动调整页面。
此时，我们可以这样做：
Title
一个 DIV，同时设置两个类名。当屏幕 >=1200px 时，一行显示 4 列，当屏幕 <1200px 时，一行显示3列，而且是浏览器自动调整。
一个栅格化系统就这样实现了。
练习任务对于栅格化的介绍就到此结束了，但如果你看完文章后什么都不做，不到一周，就会把学到的知识忘得七七八八，为了帮助你巩固知识，特地布置了一个小任务，按要求实现如下页面：
图一 图二任务要求：
当页面大于 768px 时，页面如图1所示。
当页面小于等于 768px 时， 页面如图2所示。
这里是答案和在线DEMO，但是最好先试试能不能自己做出来，如果实在做不出来，再看答案。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116081.html
摘要：实现让我们来亲自实现一个栅格化系统，假设我们要将一行划分为等分，那等分就占有的宽度。一个栅格化系统就这样实现了。 更多技术文章 什么是栅格化 在一个有限的、固定的平面上，用水平线和垂直线（虚拟的线，参考线），将平面划分成有规律的一系列格子（虚拟的格子），并依托这些格子、或以格子的边线为基准线，来进行有规律的版面布局。 通俗点来说，就是人为的把网页中的一行，等比例划分,比如将一行划分为 ...
摘要：栅格系统中的列是通过指定到的值来表示其跨越的范围。实例下图是一个栅格系统，共有四行。然后在根目录中，使用命令，可以自动将源代码编译成，放在目录中。 什么是Bootstrap Bootstrap是一个用于快速开发Web应用程序和网站的前端框架，它包括HTML,CSS,JS等。它是由Twitter开发，现在成为Github上最为流行的前端开发框架。它提供了一套响应式，移动设备优先的流式栅格...
摘要：在过去的几个星期里，我开始看到基于的布局框架和栅格系统的出现。你可能倾向于明确给出所有元素的位置，或是尽可能依赖于自动布局。 showImg(https://segmentfault.com/img/remote/1460000010188997); 在过去的几个星期里，我开始看到基于 CSS Grid 的布局框架和栅格系统的出现。我们惊讶它为什么出现的这么晚。但除了使用 CSS Gr...
阅读 917·2021-10-18 13:32
阅读 3509·2021-09-30 09:47
阅读 2154·2021-09-23 11:21
阅读 1876·2021-09-09 09:34
阅读 3479·2019-08-30 15:43
阅读 1521·2019-08-30 11:07
阅读 1060·2019-08-29 16:14
阅读 724·2019-08-29 11:06
