本文共 5483 字，大约阅读时间需要 18 分钟。
本文译自【http://j4n.co/blog/Creating-your-own-css-grid-system】，英语好的，可直接查看原网页，不需要翻墙。
翻译拿不准的地方会有英文原文，方便大家理解。
一般的网格布局如下
可以看出主要有以下几个部分
- a container（容器）
- rows（行）
- columns（列）
- gutters (the space between columns)（列边距）
容器
容器的目的就是设置整个网格的宽度，通常设置为100%，但可能要给大屏显示器设置一个最大宽度。
.grid-container { width : 100%; max-width : 1200px; } 行
行是为了将列放在里面，并防止其溢出到其他行中。为了实现这个目的，我们采用清楚浮动的hack技术来确保所有的内容都在行中。
/*-- our cleafix hack -- */ .row:before, .row:after { content:""; display: table ; clear:both; } 列
毫无疑问，列是网格布局中最复杂的一部分。首先，在CSS当中，有好几种不同的列的定位方式，而且还要考虑不同的宽度，比如响应式设计。在这里我们将列设定位置，并给出宽度。下一部分再讲响应式设计。
列定位
浮动，行内块，块级表格（display-table）,flex,有各种各样的方法。从我个人经验出发，最不容易出错和使用最广泛的就是float了。如果列是空的，将会漂浮在其他元素上面，为了防止这个，我们可以设定一个最小的宽度。
[class*='col-'] { float: left; min-height: 1px; } 列宽
为了确定一列的大小，我们可用容器的宽度来除以总的列数。在这里，容器的宽度是100%，假设是6列，那么一列就是100%/6=16.66%。
[class*='col-'] { float: left; min-height: 1px; width: 16.66%; } 当然，这只是开始，如果我们想要其他的宽度，可以这样设置：
.col-1{ width: 16.66%; } .col-2{ width: 33.33%; } .col-3{ width: 50%; } .col-4{ width: 66.664%; } .col-5{ width: 83.33%; } .col-6{ width: 100%; } 我们唯一要注意的就是，不管你最终多少列，各列加起来不能超过容器的宽度。
列边距
在'border-box' box-sizing模型出现之前，给一个百分比元素一个不可改变的宽度是一件很痛苦的事。幸运的是，用'border-box' box-sizing可以轻易的做到。
Before the 'border-box' box-sizing model, giving percentage-width elements a static padding was a real pain. Luckily, using the 'border-box' model, we can create gutters with ease.
/*-- setting border box on all elements inside the grid --*/ .grid-container *{ box-sizing: border-box; } [class*='col-'] { float: left; min-height: 1px; width: 16.66%; /*-- our gutter --*/ padding: 12px; } (Personally, I use * {box-sizing: border-box;} in my CSS to apply border-box to everything on the page).
（这句不好翻译，主要是还不理解box-sizing)
基本网格布局如下：
col-1
col-1
col-1
col-1
col-1
col-1
col-2
col-2
col-2
col-3
col-3
CSS
.grid-container{ width: 100%; max-width: 1200px; } /*-- our cleafix hack -- */ .row:before, .row:after { content:""; display: table ; clear:both; } [class*='col-'] { float: left; min-height: 1px; width: 16.66%; /*-- our gutter -- */ padding: 12px; background-color: #FFDCDC; } .col-1{ width: 16.66%; } .col-2{ width: 33.33%; } .col-3{ width: 50%; } .col-4{ width: 66.66%; } .col-5{ width: 83.33%; } .col-6{ width: 100%; } .outline, .outline *{ outline: 1px solid #F6A1A1; } /*-- some extra column content styling --*/ [class*='col-'] > p { background-color: #FFC2C2; padding: 0; margin: 0; text-align: center; color: white; } HTML
col-1
col-1
col-1
col-1
col-1
col-1
col-2
col-2
col-2
col-3
col-3
制作网格布局
针对手机，调整我们的网格布局非常简单，只需要调整列的宽度就够了。为简单起见，在屏幕小于800px时，将宽度增大一倍。要注意的就是当.col-2 ， .col-1，col-5在一行的时候，这时候我们将.col-2 ， .col-1占满整行。
The only thing to watch out for is a few exceptions where the last column in the row hangs off the end. Such as in the case of the .col-2 columns and the.col-1 beside the .col-5 column.
.col-2 and .col-1 in the row 100% wide. @media all and (max-width:800px){ .col-1{ width: 33.33%; } .col-2{ width: 50%; } .col-3{ width: 83.33%; } .col-4{ width: 100%; } .col-5{ width: 100%; } .col-6{ width: 100%; } .row .col-2:last-of-type{ width: 100%; } .row .col-5 ~ .col-1{ width: 100%; } } 如果屏幕更小，我们继续调整。
@media all and (max-width:650px){ .col-1{ width: 50%; } .col-2{ width: 100%; } .col-3{ width: 100%; } .col-4{ width: 100%; } .col-5{ width: 100%; } .col-6{ width: 100%; } } 到这里，我们就创建害了我们的响应式布局：
col-1
col-1
col-1
col-1
col-1
col-1
col-2
col-2
col-2
col-3
col-3
col-4
col-2
col-5
col-1
col-6
要提醒的是这只是创建网格布局的开始，这还算不上是一个框架或完美的解决方法，但至少让我们觉得采用CSS创建网格布局的过程并不神秘。
发表评论
最新留言
关于作者
