本文译自【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)

基本网格布局如下:

<div class="grid-container outline">
<div class="row">
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
</div>
<div class="row">
<div class="col-2"><p>col-2</p></div>
<div class="col-2"><p>col-2</p></div>
<div class="col-2"><p>col-2</p></div>
</div>
<div class="row">
<div class="col-3"><p>col-3</p></div>
<div class="col-3"><p>col-3</p></div>
</div>
</div>

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:;
margin:;
text-align: center;
color: white;
}

HTML

    <div class="grid-container outline">
<div class="row">
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
</div>
<div class="row">
<div class="col-2"><p>col-2</p></div>
<div class="col-2"><p>col-2</p></div>
<div class="col-2"><p>col-2</p></div>
</div>
<div class="row">
<div class="col-3"><p>col-3</p></div>
<div class="col-3"><p>col-3</p></div>
</div>
</div> <hr/>

制作网格布局

针对手机,调整我们的网格布局非常简单,只需要调整列的宽度就够了。为简单起见,在屏幕小于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. 
To counter this, we'll make the last .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%; }
}

到这里,我们就创建害了我们的响应式布局:

<div class="grid-container outline">
<div class="row">
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
<div class="col-1"><p>col-1</p></div>
</div>
<div class="row">
<div class="col-2"><p>col-2</p></div>
<div class="col-2"><p>col-2</p></div>
<div class="col-2"><p>col-2</p></div>
</div>
<div class="row">
<div class="col-3"><p>col-3</p></div>
<div class="col-3"><p>col-3</p></div>
</div>
<div class="row">
<div class="col-4"><p>col-4</p></div>
<div class="col-2"><p>col-2</p></div>
</div>
<div class="row">
<div class="col-5"><p>col-5</p></div>
<div class="col-1"><p>col-1</p></div>
</div>
<div class="row">
<div class="col-6"><p>col-6</p></div>
</div>
</div>

要提醒的是这只是创建网格布局的开始,这还算不上是一个框架或完美的解决方法,但至少让我们觉得采用CSS创建网格布局的过程并不神秘。

不用bootstrap,只用CSS创建网格布局的更多相关文章

  1. CSS Grid 网格布局全解析

    介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...

  2. CSS Grid网格布局全攻略

    CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...

  3. 转:Bootstrap研究 精巧的网格布局系统

    本网格布局系统属于Scaffolding(框架,布局)部分.在Scaffolding里面有(固定)网格布局(Grid System)和流式网格布局(Fluid Grid System).本文讨论第一种 ...

  4. CSS Grid 网格布局教程

    一.概述 网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...

  5. bootstrap学习总结-02 网格布局

    1  网格布局 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. <!DOCTYPE html> ...

  6. CSS中网格布局实战(初级)

    大家好,网格布局是我们在网页布局中经常用到的,那这里我就给大家分享一篇简单的网格布局,让大家能简单明了的了解网格布局的基本内容.闲话不多说,直接进入主题! 第一步,基本的框架结构.这里直接一个div来 ...

  7. 轻松上手CSS Grid网格布局

    今天刚好要做一个好多div格子错落组成的布局,不是田字格,不是九宫格,12个格子这样子,看起来有点复杂.关键的是笔者有点懒,要写那么多div和css真是不想下手啊.多看了两眼,这布局不跟网格挺像吗?c ...

  8. Pure CSS 的网格布局(比bootstrap小很多且易扩展的css UI)

    (转自百度经验)http://jingyan.baidu.com/article/48a42057c44fdba9242504dd.html Pure是一个简单.实用的CSS框架,鉴于目前网上对pur ...

  9. css - Grid网格布局

    .wrapper{ display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 1 ...

随机推荐

  1. Hyper-V启动虚拟机,消耗C盘大量磁盘空间

    问题描述 经常使用Hyper-V虚拟机的朋友,可能会碰到这样的现象,当启动某些虚拟机的是否,发现C盘的空间突然减少,减少的空间与虚拟机的内存一样大少. 通过分析C盘空间的磁盘文件,发现在Hyper-V ...

  2. MYC编译器源码之语法分析

    MyC编译器采用自顶向下的方法进行语法解析,这种语法解析方式,一般是从最左边的Token开始,然后自顶向下看哪一条语法规则可能包含这个Token,如果包含这个Token,则自左向右根据这条语法规则逐一 ...

  3. 通过css使用background-color为背景图添加遮罩效果

    一个div同时设置background-color和background-image的话,color是处于img层下方的,无法实现遮罩效果,所以需要再创建一个div作为其子div,然后设置子div的背 ...

  4. JWT+Log4net配置与使用

    Log4net的优点        log4net是.Net下一个非常优秀的开源日志记录组件.log4net记录日志的功能非常强大.它可以将日志分不同的等级,以不同的格式,输出到不同的媒介.程序运行过 ...

  5. C# 生产成条形码3种方法

    首先效果: 1:首先下载BarcodeLib.dll 下载地址 http://pan.baidu.com/share/link?shareid=2590968386&uk=2148890391 ...

  6. 数据分析融入至BI工具的新思路

    欢迎访问网易云社区,了解更多网易技术产品运营经验. 很认同一种说法:BI对企业的作用不是BI本身,而是数据本身.那么BI的作用和意义是干什么的呢-是让有意义的数据自己说出自己意义的工具. BI发展至今 ...

  7. 程序媛计划——python初级课时3~5

    产生1-10中的随机数: for 循环:所有可遍历对象都能用于for循环,如一个字符串. len(list),list中的元素类型可以各不相同:可以直接用下标对list元素赋值来更新列表 对字符串可以 ...

  8. 欢迎使用CSDN-markdown编辑器u

    这里写自定义目录标题 欢迎使用Markdown编辑器 新的改变 功能快捷键 合理的创建标题,有助于目录的生成 如何改变文本的样式 插入链接与图片 如何插入一段漂亮的代码片 生成一个适合你的列表 创建一 ...

  9. Java 8 LocalDateTime 初使用

    LocalTime :  只包括时间 LocalDate : 只包括日期 LocalDateTime : 包括日期和时间 JDBC映射 LocalTime 对应 time LocalDate 对应 d ...

  10. 微服务是"银弹"吗?

    前言:所谓"银弹",本意是用金属银做成的子弹:在古老的传说里它是杀死狼人的有效武器.在著作<人月神话>也有描述.微服务是当前软件界流行的名词,那么它能成为像银弹一样厉害 ...