HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 应用推荐 查看内容

CSS Grid布局:快速入门

2016-9-29 21:19| 发布者: Hyukoh| 查看: 1115| 评论: 0|原作者: Airen的博客|来自: Airen的博客

摘要: 我们将了解前沿的CSS Grid布局,从而了解CSS Grid布局是如何改变Web的布局。

  我们将了解前沿的CSS Grid布局,从而了解CSS Grid布局是如何改变Web的布局。这篇文章是一篇快速入门的文章,将会跳过一些细节和其中的细微差别,其主要是帮助你了解前沿的CSS Grid布局。


  设置你的浏览器


  CSS Grid布局(也常常被称为网格)是一个正在讨论的CSS模块规范,你会发现现在浏览器对其支持很弱。如果你现在开始使用它,你需要在IE11(它支持的是旧规范)、Microsoft Edge、Chrome Cannary或者Firefox Nightly才能看到效果。

  也许最简单的方法是在Chrome浏览器中通过chrome://flags/#enable-experimental-web-platformfeatures打开Chrome浏览器实验网络平台功能。

  建立一个网格


  网格允许我们根据区域来排列页面上的元素。


  专业术语


  在了解网格之前,需要对一些专业术语有所了解。在整个网格中常用到的术语有:网格线(Grid lines)、水平或纵向网格轨道(Grid tracks)。网格轨道其实就相当于行(rows)和列(columns),而且两者之间有一个间距(Gutters)。在网格轨道相交的区域,就是单元格(Grid cells),相当于table中的单元格。这些重要的术语能帮助我们更好的理解Grid。

  下图演示了一个Grid,其对应的专业术语:http://cdn2.w3cplus.com/cdn/farfuture/n6XaV2jK-w8ou3KkPpTR889Fr36DP2tVaqRgC0hidJs/mtime:1475070947/sites/default/files/blogs/2016/1609/grid-terms-lines-rows-columns-cells-.svg

  1表示Grid lines

  2表示Columns

  3表示rows

  4表示cells


  上图是一个基本的Grid,高亮部分分别代表了Grid lines、columns、rows和cells。


  间距(gutters)


  对于一个平面布局,它看起来和我们熟悉的网格没有两样,两个网格轨道之间的区域称为间距(gutters):

  网格区域(Grid area)


  还有最后一个术语要介绍:


  网格区域是由任何四个网格线组成的区域,它可以包含任意数量的网格单元格。

  接下来花点时间让我们创建一个网格,并且在浏览器能看到其效果。


  网格模板


  创建上面的网格,需要创建一个容器,你可以根据你自己的喜欢来设置:

<section class="grid-1">

</section>

  在这个容器里,我们将放九个子元素进去:

<section class="grid-1">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>
  <div class="item-5">5</div>
  <div class="item-6">6</div>
  <div class="item-7">7</div>
  <div class="item-8">8</div>
  <div class="item-9">9</div>
</section>

  如果你想跟着下面的内容一起动手创建一个网格,你需要先从CodePen中Fork一份出来。在这个示例的初始化中,我给每个网格项目添加了不同的样式风格。

body {
  padding-top: 20px;
  background: #fbfbfb;
}

/* items */

.grid-1 div {
  color: white;
  font-size: 20px;
  padding: 20px;
  }

/* specific item styles */

.item-1 {
  background: #b03532;
}
.item-2 {
  background: #33a8a5;
}
.item-3 {
  background: #30997a;
}
.item-4 {
  background: #6a478f;
}
.item-5 {
  background: #da6f2b;
}
.item-6 {
  background: #3d8bb1;
}
.item-7 {
  background: #e03f3f;
}
.item-8 {
  background: #59a627;
}
.item-9 {
  background: #4464a1;
}


  网格规则


  首先需要通过给容器设置display的值为grid,声明容器是一个网格容器:

.grid-1 {
  display: grid;
}

  对,这很容易就做到了。接下来需要定义网格样式风格。也就是设置网格行和列,我们可以通过grid-template-columns和grid-template-rows属性来设置:

.grid-1 {
  display: grid;
  grid-template-columns: 150px 20px 150px 20px 150px;
  grid-template-rows: auto 20px auto 20px auto;
}

  你可以看到,每个属性都有五个值。gird-template-columns的每个值分别表示:第一列的宽度是150px,第二个是20px,第三个是150px,以此类推,设置了五列的宽度,最终效果看起来就像芬兰的国旗。grid-template-rows的五个值也是类似的。其中每个都有一个默认值auto,告诉浏览器,其高度是内容的高度,但是我们希望每两行之间需要一个间距,而且这个间距的高度应该是20px。因此我们需要列出所有五行的高度。

  现在我们看到的效果是:

body {
  padding-top: 40px;
  background: #f5f7f8;
}

.grid-1 {
  display: grid;
  grid-template-columns: 150px 20px 150px 20px 150px;
  grid-template-rows: auto 20px auto 20px auto;
}

/* items */

.grid-1 div {
  color: white;
  font-size: 20px;
  padding: 20px;
  }

/* specific item styles */

.item-1 {
  background: #b03532;
}
.item-2 {
  background: #33a8a5;
}
.item-3 {
  background: #30997a;
}
.item-4 {
  background: #6a478f;
}
.item-5 {
  background: #da6f2b;
}
.item-6 {
  background: #3d8bb1;
}
.item-7 {
  background: #e03f3f;
}
.item-8 {
  background: #59a627;
}
.item-9 {
  background: #4464a1;
}

/* warn against lack of browser support */

.nope {
  display: block;
  color: white;
  background: orange;
  text-align: center;
  padding: 10px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
} 

@supports (display: grid) {
  .nope {
    display: none;
  } 
}


  每个项目已经按顺序自动构建了一个网格区域。这是没有问题,但网格项目2、4和7发生了什么?它们变成了列间距。如果在网格布局中没有显式的设置,那么网格轨道之间就会构成一个间列。为了让其更像网格的间距,我们需要添加一些其它网格样式规则。


  网格项目规则


  从语法上讲这一点很复杂,但我们要让事情尽可能变得更容易。我们开始给第一个网格项目设置grid-column:1和grid-row:1:

.item-1 {
  grid-column: 1;
  grid-row: 1;
}

  网格项目会自己填充网格线之间的最小可用空间。第二个项目有点不太明显,但我们希望这个也从grid-row:1开始,同时希望跳过grid-column:2,而是从grid-column:3开始。那么第二列就变成了列与列之间的间距。

.item-2 {
  grid-column: 3;
  grid-row: 1;
}

  我们将继续这样做,跳过列间距和行间距,最终完成了第九个网格项的设置:

.item-9 {
  grid-column: 5;
  grid-row: 5;
}

  最终的代码如下所示:

.grid-1 {
  display: grid;
  grid-template-columns: 150px 20px 150px 20px 150px;
  grid-template-rows: auto 20px auto 20px auto;
}
.item-1{
  background: #b03532;
  grid-column: 1;
  grid-row: 1;
}
.item-2 {
  background: #33a8a5;
  grid-column: 3;
  grid-row: 1;
}
.item-3 {
  background: #30997a;
  grid-column: 5;
  grid-row: 1;
}
.item-4 {
  background: #6a478f;
  grid-column: 1;
  grid-row: 3;
}
.item-5 {
  background: #da6f2b;
  grid-column: 3;
  grid-row: 3;
}
.item-6 {
  background: #3d8bb1;
  grid-column: 5;
  grid-row: 3;
}
.item-7 {
  background: #e03f3f;
  grid-column: 1;
  grid-row: 5;
}
.item-8 {
  background: #59a627;
  grid-column: 3;
  grid-row: 5;
}
.item-9 {
  background: #4464a1;
  grid-column: 5;
  grid-row: 5;
}


  总结


  就是这么的简单,你可以看到一个基本的网格布局。接下来我们总结一下这四个基本步骤:

  创建一个容器,通过display:grid;声明这个容器是一个网格容器

  同样在容器中设置grid-template-columns和grid-template-rows声明网格轨道(声明行和列)

  在网格容器中添加子元素,创建网格项目(单元格)

  使用grid-column和grid-row来指定网格项目(单元格)的列和行



来源作者:Airen的博客

鲜花

握手

雷人

路过

鸡蛋
更多

相关阅读

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-6-27 08:18

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部