1. 1. 编写HTML
    1. 1.1. 栅格系统的基本结构
    2. 1.2. 定义列Column
    3. 1.3. 清除浮动
    4. 1.4. 完善栅格
    5. 1.5. 完成剩下的工作
Table of Contents ▼

CSS第三课 栅格系统

这一节内容我自己都觉得比较鸡肋,就当捧个场$_$,感兴趣的完全可以自行参考 uikitbootstrap 的实现,以及二者的差异。

实现自己的栅格系统,实现响应式布局

利用栅格系统,完成设计稿的第二块区域。学有余力的同学,可以尝试再用inline-block实现。

section two

编写HTML

<section>
  <div class = "container text-center">
    <header class = "section__header">
      <h2>WHY USE OUR PLATFORM</h2>
    </header>
    <ul class = "list-nostyle row">
      <li class = "media--left col-md-4">
        <img src = "">
        <div class = "media__body">
          <h3 class = "media__heading">……</h3>
          <p>……</p>
        </div>
      </li>
      ……
    </ul>
  </div>
</section>

栅格系统

栅格系统的作用在于:

  • 快速布局
  • 可重用
  • 响应式设计

如果用过Bootstrap,你就知道,Bootstrap采用了12列的栅格。其实你完全可以自由设计栅格的列数,12、16、24等等都是可以。

但是,你可能需要关注,960这个数字,很多网站默认的宽度都是960px:

website use 960px

之所以选择960是因为绝大多数显示器都是1024宽,那为了避免出现水平方向的滚动条,那就会采用一个比1024窄一点的宽度,而960正可以被很多数整除:

1, 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480, 960

对于布局来说,你可以选择更多的比例。

如果我们选择1000,相对就不是那么方便了:

1, 2, 4, 5, 8, 10, 20, 25, 40, 50, 100, 125, 200, 250, 500, 1000

现在我们来写一个栅格系统:

栅格系统的基本结构

在进行排版时,需要对水平轴划分,将相应的内容放到之前规划的位置。这就是我们看到的row(行)column(列)column作为row的子元素;

html结构:

<div class = "row">
  <div class = "col-x">
  </div>
</div>

有的栅格系统还会用一个containerrow包裹起来,这不是必须的,如果你没有特殊的需求,放心大胆的直接用rowcolumn。在bootstrap中,row需要被container包裹,看下源码,想想为什么Bootstrap这么设计:

.container
{
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
.row {
  margin-right: -15px;
  margin-left: -15px;
}

定义列Column

我们这里采用12列的栅格系统,行用.row来控制,列column我们参考Bootstrap的命名,col-md-x

其中,x代表1~12的数字,xs,sm,md,lg匹配不同屏幕大小:

栅格类

采用float

[class ^= "col-"]{
  float: left;
  list-style: none; 
}

.col-md-12{
  width: 100%;
}
.col-md-11{
  width: 91.66666667%;
}
.col-md-10{
  width: 83.33333333%;
}
.col-md-9{
  width: 75%;
}
.col-md-8{
  width: 66.66666667%;
}
.col-md-7{
  width: 58.33333333%;
}
.col-md-6{
  width: 50%;
}
.col-md-5{
  width: 41.66666667%;
}
.col-md-4{
  width: 33.33333333%;
}
.col-md-3{
  width: 25%;
}
.col-md-2{
  width: 16.66666667%;
}
.col-md-1{
  width: .083333333%;
}

对所有的col都添加了list-style: none,兼容<li>的情况。

清除浮动

这次我们采用clearfix实现:

.row:before,
.row:after{
  content: '';
  display: block;
}
.row:after{
  clear: both;
}

完善栅格

现在你已经可以使用栅格系统完成布局了:

但是还有两点需要处理:

  1. 在栅格之间增加间隔:我们很多时候都需要栅格之间要有一定间隔,而不是两个紧挨着。
  2. 移动适配:我们的布局应该能适应不同屏幕的大小

增加间隔

并不是所有的栅格之间都需要间隔,所以没有间隔的栅格也是需要保留的。那就新增一个类来控制有间隔的栅格:

.row-divider > *{
  padding-right: 1.6%;
  padding-left: 1.6%;
}

为了避免重新计算宽度所占的百分比,这里我们使用了padding

移动适配

可以采用两种实现方案,一种是根据屏幕大小来调整col-的宽度,另外一种是根据屏幕大小应用不同的class。两种方法其实都很简单,直接上代码:

1. 调整col-宽度

.col-6{
  width: 50%;
}

@media all and (max-width: 750px){
  width: 100%;
}

这里只是给出了最简单的演示,很多时候,我们需要设置多个阈值,并且还要考虑最后一个元素是否会溢出的问题,这些需要提前计算好。

2. 应用不同的class

/* 小屏幕(平板,大于等于 768px) */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕(桌面显示器,大于等于 992px) */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕(大桌面显示器,大于等于 1200px) */
@media (min-width: @screen-lg-min) { ... }

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

这里直接粘贴了Bootstrap的代码,很简单是吧,相比第一个解决方案,这样更好控制。

完成剩下的工作

这是我们最后的效果,尝试下自己完成:

  1. 图片、文字左右布局
  2. 图片和文字垂直居中
  3. 当文字过多时,用...表示