澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

Grid布局这样玩,网页布局的未来

2019-11-10 作者:澳门新萄京赌场网址   |   浏览(163)

CSS Grid布局这样玩

2017/04/24 · CSS · Grid

原文出处: 大漠   

自从去年下半年开始,CSS Grid布局的相关教程在互联网上就铺天盖地,可谓是声势浩大。就针对于Web布局而言,个人认为Grid布局将是Web布局的神器,它改变了以往任何一种布局方式或者方法。不管以前的采用什么布局方法都可以说是一维的布局方式,而Grid最大的特色,采用了二维布局。@Rachel Andrew也一直致力于完善Grid的规范。

就我个人而言,我也一直在不断的关注这个布局利器的相关更新,自从最初规范的出来,到目前规范的完善。在站上也不断的在更新CSS Grid布局的使用。虽然这方向的教程已经很多了,但各有千秋,我追求以最简单,最直接的方式来阐述它的使用方式方法。让初学者能尽快的掌握其使用规则。

前段时间@Mirza Joldic在Medium上发布了一篇文章,通过几个Gif动态非常形象的阐述了CSS Grid的几个核心概念以及使用方法,今天我就借花献佛,用这几张图让初学者快速掌握CSS Grid的核心概念和使用技巧。

2017,新年伊始,做点新的事情,那先从简单的开始吧,瞄准了css grid layout;

近几年,Flexbox的出现,带来了巨大的轰动效应,它使CSS变得更加强大,给我们带来了更大的施展空间,并在几乎所有的浏览器中都得到了很好地支持,你没有理由不使用它。我们发现Flexbox在很多情况下对我们非常有帮助,但是它绝对不是一个构建整个布局的理想候选方案。我们更倾向于使用浮动或者内联元素来构建整体布局,但是这并不是浮动、内联元素被创建出来的初衷。但很遗憾CSS从来没有一个这样的内置功能,为了建立布局,我们没有选择,只能用这些Hack。好消息是CSS Grid Layout Model 是一个转折点,我们可以用它的一些基础功能就可以重建一些标准布局。目前,浏览器对网格布局的支持情况还不是很理想。唯一支持它的浏览器是Edage和最新的Internet Explorer 。幸运的是,我们可以在Google Chrome,FireFox ,Safari 上手动启用该功能,在Chrome上我们在导航栏输入chrome://flags切换到“启用实验性Web平台”标识并重启浏览器,FireFox上我们在导航栏输入about:config, 搜索 layout.css.grid.enabled 设置为true,Safari上我们需要下载 Safari Technology Preview 版本的浏览器,就可以使得浏览器支持网格布局。

简介

CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,旨在改变我们基于网格设计的用户界面方式。正如我们所知,CSS 总是用于布局我们的网页,但它并没有做的很好。刚开始的时候我们使用表格(table),然后使用浮动(float)、 定位(position)和内联块(inline-block),但所有这些方法本质上来讲都是hacks,并留下了很多需要实现的重要功能问题(例如垂直居中),虽然Flexbox可以起到一定的补救作用,但是旨在用于更简单的一维布局,并不适用于复杂的二维布局(实际上 Flexbox 和 Grid 可以一起结合使用起到最佳效果)。网格(Grid)是第一个专门为解决布局问题而创建的CSS模块,用来解决我们之前在制作网站时使用hacks处理布局问题。
这里有两件事情启发我创建本指南。第一个是 Rachel Andrew 的令人敬畏的书--为 CSS Grid 布局做好准备。这本书很详尽明确的的介绍了Grid,是整篇文章的基础。我强烈鼓励你买它,读它。另外一个很大的灵感来自于 Chris Coyier 的-- Flexbox完整指南,这本书是我了解Flebox的一个很优秀的资源。它帮助了很多人,这是事实,这里,我还想补充一句,当你使用谷歌搜索"flexbox"时,会出现很多类似的资源,但是为什么不直接利用最好的资源呢?
我书写此指南的目的是基于目前最新规范的版本,规范其网格概念。所以我不会再次提及过时的 IE 语法,并且随着规范的成熟,我会尽我们所能定期更新此指南。

CSS Grid现在已经被W3C纳入到CSS3的一个布局模块当中,被称为**CSS Grid Layout Module。
现阶段网页布局不再是传统方式,使用float或者是position实现各种页面布局,大家也在追求新的,更加简单,更加灵活的布局方法,除去之前火的一塌糊涂的响应式框架,大家更应该关注两种新的布局写法:1、display-flex(弹性盒子)2、grid(网格)。
flex布局的话大家可以去看阮一峰写的《Flex 布局教程:语法篇》、《Flex 布局教程:实例篇》,写的非常详细,通熟易懂。

Web布局的历史演变

自从Web出来至今,Web的布局也经过了几个演变,下图可以一目了然:

图片 1

有关于Web布局的演变史,去年也整理过一篇相关的文章简单的阐述了这方面的故事,如果你感兴趣的话,可以点击这里进行了解。在Web的学习过程中,学习Web布局是一个不可避免的过程,而随着前端技术的日新月异的变化,布局方式也在不断的更新,早在2013年@Peter Gasston就对CSS布局的未来趋势就做过预判断,文章中就提供了CSS Grid的布局。如果今天来看,这种趋势的预判是正确的,特别是今年3月份之后,各大主流浏览器都发布了对CSS Grid的支持。既然如此,学习CSS Grid相关的知识就很有必要。

既然掌握CSS Grid很有必要,那用什么样的方式能最快的掌握CSS Grid相关的知识呢?这很重要。 特别是@Mirza Joldic在Medium上发布的文章,里面的动图让我耳目一新,通过简单的几张图,就把CSS Grid的几个核心介绍的非常清楚,我觉得很有必要拿出来与大家分享。

在继续下面的内容之前,再次感谢@Mirza Joldic的付出。那咱们就不说废话了,开始今天的学习之旅。


图片 2

基础知识与浏览器支持

Grid 的入门是很容易的。你只需要定义一个容器元素并设置display:grid,使用grid-template-columnsgrid-template-rows属性设置网格的列与行的大小,然后使用grid-columngrid-row属性将其子元素放入网格之中。与flexbox类似,网格项的源顺序并不重要。你的CSS可以按任何顺序放置,这使得你很容易重新布局网格与媒体查询。想象一下你定义的整个页面布局,然后如果想要完全重新布局以适应不同的屏幕宽度,这时仅仅使用几行 CSS 代码就可以实现。Grid是有史以来最强大 CSS 模块之一。
关于 Grid 一件很重要的事情就是它现在还不适用于项目使用。目前还处于 W3C 的工作草案之中,并且默认情况下,还不被所有的浏览器正确支持。Internet Explorer 10 和 11 已经可以实现支持,但也是利用一种过时的语法实现的。现在出于示例演示,我建议你使用启用了特殊标志的 Chrome, Opera 或者 Firefox 。在 Chrome,导航到chrome://flags并启用" web 实验平台功能"。该方法同样适用于 Opera (opera://flags)。在Firefox中,启用 layout.css.grid.enabled标志。
这里有一张浏览器支持情况的表格(之后我会继续更新):

图片 3

CSS Grid Layout

除了Microsoft,浏览器厂商似乎想要等到Grid规范完全成熟后再加以推广。这是一件好事,因为这意味着我们就不需要担心学习多个语法。
这只是时间问题,你可以在生产环境中使用Grid。但是现在你需要开始学习它了。

什么是CSS Grid?

CSS Grid Layout是CSS为布局新增的一个模块。网格布局特性主要是针对于Web应用程序的开发者。可以用这个模块实现许多不同的布局。网络布局可以将应用程序分割成不同的空间,或者定义他们的大小、位置以及层级。
就像表格一样,网格布局可以让Web设计师根据元素按列或行对齐排列,但他和表格不同,网格布局没有内容结构,从而使各种布局不可能与表格一样。例如,一个网格布局中的子元素都可以定位自己的位置,这样他们可以重叠和类似元素定位。

CSS Grid布局的介绍

学习CSS Grid布局更多的相关知识,我觉得通过一些工具会对大家的理解更有帮助,到目前为止,这方面的在线工具已经有很多种,比如:

  • GRID GARDEN:通过一个小游戏的方式,让你快速掌握CSS Grid的相关知识,这个有点类似于FLEXBOX FROGGY
  • Griddy by @drewisthe
  • CSS Grid Cheat Sheet by @alialaa

下面的动图是使用@Mirza Joldic写的CSS Grid Playground小工具。动图来了:

图片 4

这里要提两个核心概念,这两个核心概念有点类似于Flexbox布局:

  • Grid容器(对应Flexbox布局中的Flex容器)
  • Grid项目(对应Flexbox布局中的Flex项目)

比如一个这样的HTML结构:

图片 5

使用 CSS Grid布局首要的第一步,就是通过display:grid;来对容器声明一个网格容器,那么这个div元素里面对应的子元素就自动成为网格项目。

图片 6

虽然你在div.grid-container中设置了display:grid;,声明了这个元素为Grid容器,但在浏览器中,并看不到有任何的变化。但在在幕后中,他们还是发生了变化,div.grid-container是一个Grid容器,他的所有子元素就自动变成了网格项目。

接下来,使用grid-template-columns: 1fr 1fr 1fr;来定义三列网格:

图片 7

从gif图中就明显的看出来,现在有点变化了,颜色块变小了,但很难区分出有何变化,为了让效果之间有更突出的差异,再给.grid-container中添加grid-gap:5px

图片 8

看到变化了吧,整个网格分了三个列,单元格之间有5px的间距,同时每列的列宽是整个宽度的三分之一,那是因为我们采用了fr单位,而且把整个网格分成了三列,每列的宽度是1fr。这里告诉我们三个知识点:

  • grid-template-columns用来把网格指定列的宽度
  • grid-gap用来指定列(或行)的间距
  • fr可以自动根据网格容器的宽度来计算列的宽度

现在我们把grid-template-columns的值改成:1fr 2fr 1fr,对应的效果就会变成:

图片 9

现在第二列的宽度是第一列和最后一列的两倍。这也再次证明fr单位的强大之处,使用它可以让你很容易定义你的网格尺寸。

现在越来越接近我们想要的网格。但需求是不断变化的,比如我们现在想让顶部的第一行尽可能的宽,比如说跨整个网格列(比如我们网页的头部,或者说我们常见的导航)。如此一来,只需要在第一个网格上使用grid-column: 1 / 4

图片 10

或许第一次接触1 / 4会令你感到神秘,其实这个涉及到了CSS Grid中的重要概念之一,那就是网格线,其中第一个数字是列的起始网格线位置,第二个数字是线束网格线的位置。对于一个CSS Grid,可以通过grid-template-columns创建列网格线,grid-template-rows创建行网格线。这种方式创建的是一种显式的网格线。当然,除了这种方式,还可以创建隐式网格线。除此之外,还可以使用grid-auto-rowsgrid-auto-columns可以创建一个隐式网格。这个隐式网格对应的网格线就被称之为隐式网格线。下图简单的展示了示例中的网格线示意图:

图片 11

接下来,我们想要有一个300px的侧边栏高度,并且让他的位置是垂直方向的2 / 3。我们可以使用grid-row: 2 / 4来实现,这个特性和grid-column非常的类似。这个时候,效果变成这样:

图片 12

其实CSS Grid看上去和表格非常的类似,在表格中我们有一个专业的术语,合并单元格。其实在CSS Grid布局中,我们同样有一个类似的特性,那就是在grid-column或者grid-row中引入关键词span,在关键词span后面紧跟一个数值,就是表示合并单元格的数量,先来看下图:

图片 13

上面的示例中,我们使用到了grid-column: 2 / span 1grid-row: 2 / span 2。其中grid-column: 2 / span 1表示从列网格线2开始,跨度是1个列网格线(其实就是合并一个列单元格)。而grid-row: 2 / span 2表示的是从行网格线2开始,跨度是两个两个线(其实就是合并两个行单元格)。

接着我们来做页脚,在做页脚之前,我们先删除两个网格项目,因为不需要他们了。做页脚和做页头非常的类似,继续使用grid-column: 1 / 4即可:

图片 14

通过上面的方式,我们可以轻易的控制网格,也能非常容易的实现一个Web面页的布局,比如一个三列的布局。但我们在布局中经常还需要控制对齐方式,特别是在CSS Grid的布局当中,比如下面的示例中,我们第三列并未占满整个高度,这个时候希望它能底部对齐。此时为了实现这样的效果,需要使用到CSS中的对齐模块特性,比如在这里,我们可以使用align-self: end来实现:

图片 15

align-self是CSS中的一个新模块特性Box Alignment中的一个属性。有关于这个模块的的功能还是非常的实用。@Rachel Andrew整理了一份Box Alignment Cheatsheet,里面详细介绍了Box Alignment的使用。简单的来讲,这个规范中有三个关键部分:

  • Positional Alignment:关键词有startendcenter
  • Baseline Alignment:关键词有baselinefirst baselinelast baseline
  • Distributed Alignment:关键词有space-betweenspace-around

其实你要是对Flexbox熟悉的话,你或许感觉这个Box Alignment有点类似于Flexbox中的一些控制Flex项目对齐方式的属性。事实是这样的,如果你感兴趣想深入的了解这方面的相关知识,建议你花点时间阅读《Web布局新系统:CSS Grid,Flexbox和Box Alignment》一文。

如果你对上面的相关知识有所了解的话,你就可以很轻易的使用CSS Grid相关知识实现一个常用的Web页面布局效果。比如下面这张图,为了好完,我把主内容的容器设置了具体的宽度,并且通过Box Alignment属性,让这个区域水平垂直居中:

图片 16

整个题外话,虽然实现水平垂直居中的解决方案已有很多种了,但Box Alignment模块将是最佳方式。

如果你感兴趣的话,你也可以通过@Mirza Joldic写的CSS Grid Playground小工具去尝试各式各样的网格布局效果。从而加强对CSS Grid的概念。当然,在使用它去做一些事情或者做一些创意之前,还是很有必要对CSS Grid基础要有一个简单的了解。个人建议你花点时间阅读一下下面几篇文章:

  • CSS Grid布局:图解网格布局中术语之一
  • CSS Grid布局:图解网格布局中术语二
  • CSS Grid布局:图解网格布局中术语三
  • CSS Grid布局指南

当然,如果你深入的学习CSS Grid的相关知识,个人强列你仔细阅读完这里的所有文章。其实我个人也是CSS Grid的极度爱好者,我将在这里不断的更新和发布有关于CSS Grid的相关文章。希望这些文章对你学习和使用CSS Grid有所帮助。

目前WEB布局的方式:

当前浏览器兼容性

重要术语

在深入研究网格的概念之前,我们需要理解其相关术语概念。 因为这里所涉及的术语在概念上都有点类似,如果你不首先记住Grid规范定义,你就会很容易将其与其他概念相混淆。 但是不需要担心,这里的属性并没有很多。

CSS Grid兼容性

图片 17

caniuse查询结果

总结

这篇文章借助于@Mirza Joldic写的CSS Grid Playground小工具以及博文中提供的动图,快速帮助大家理解CSS Grid的核心概念,以及快速使用这些知识掌握CSS Grid相关知识,从而通过掌握的CSS Grid知识创建自己想要的Web布局效果。虽然CSS Grid已经很强大了,但为了能更好的满足Web开发者的需求,它还在不断的更新,不断的提供和完善新特性,有关于这方面的变更,大家可以关注W3C规范的相关更新。当然也可以关注小站有关于CSS Grid相关更新。如果您有这方面的经验,欢迎在下面的评论中与我们一起分享。

2 赞 7 收藏 评论

图片 18

1、文档流,流式布局

2、 浮动布局

3、 定位

图片 19

网格容器(Grid Container)

当一个元素的属性设置为display:grid时, 它是所有网格项(Grid Items)的直接父元素。 在下面示例中container就是网格容器。
HTML:

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>

基本概念

1、网格线
网格线组成了网格,是网格的水平和垂直的分界线。一个网格线存在行或列的两侧。我们可以引用它的数目或者定义的网格线名称。

图片 20

网格线

2、网格轨道
网格轨道是就是相邻两条网格线之间的空间,就好比表格中行或列。所在在网格中其分为grid column和grid row。每个网格轨道可以设置一个大小,用来控制宽度或高度。

图片 21

网格轨道

3、网格单元格
网格单元格是指四条网格线之间的空间。所以它是最小的单位,就像表格中的单元格。

图片 22

网格单元格

4、网格区域
网格区域是由任意四条网格线组成的空间,所以他可能包含一个或多个单元格。相当于表格中的合并单元格之后的区域。

图片 23

网格区域

5、网格容器
通过使用display属性给元素显式设置了属性值grid或inline-grid,此时这个元素将自动变成网格容器。这个类似于flexbox一样,将元素设置设置为display:flex,元素将自动变成弹性盒模型。
6、网格单元格顺序
跟flex布局一样,通过order属性来对网格单父元格进行顺序重排。

未来可能最理想的布局方式:

Chrome启用实验性Web平台

网格项(Grid Item)

网格容器的子节点(例如直接后代)。这里 item元素都是网格项,但是sub-item不包含其中。
HTML:

<div class="container">
  <div class="item"></div> 
  <div class="item">
    <p class="sub-item"></p>
  </div>
  <div class="item"></div>
</div>

定义网格

父元素设置display:grid;或者是display:inline-grid;即可

1、Flexbox (https://drafts.csswg.org/css-flexbox) 伸缩布局

2、CSS Grid Layout (https://drafts.csswg.org/css-grid) 网格布局

3、Box Alignment ()

图片 24

网格线(Gird Line)

分界线构成了网格的结构。它们可以是垂直的("列网格线")也可以是水平的("行网格线"),并且位于一行或一列的任一侧。下面图片中的黄线就是列网格线的示例。

图片 25

列网格线

基于网格线的占位区

网格中的单元格是由网格线划分出来的,那么我们就可以灵活的使用网格线来划分出我们需要的单元格;
网格布局中,网格线有两种:一种是行线,一种是列线,对应的每个单元格都有列线起始线(grid-column-start),列线终止线(grid-column-end),行线起始线(grid-row-start),行线终止线(grid-row-end)。
代码如下:

  <div class="container">
        <div class="box a">a</div>
        <div class="box b">b</div>
        <div class="box c">c</div>
        <div class="box d">d</div>
        <div class="box e">e</div>
        <div class="box f">f</div>
        <div class="box g">g</div>
        <div class="box h">h</div>
        <div class="box i">i</div>
        <div class="box j">j</div>
    </div>

css代码如下:

  .a{ 
    grid-column-start: 1; 
    grid-column-end: 2; 
    grid-row-start: 1; 
    grid-row-end: 2; 
    }

显示如下:

图片 26

Paste_Image.png

这种方式可以让元素显示在任意的位置,比如让a和f对调一下位置

  .a {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 4;
    }
.f {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
    }

效果如下:

图片 27

Paste_Image.png

比之前我们写代码既节省时间,逻辑又十分简单。

觉得上述写法比价复杂的话,可以用简写的方式进行书写:
代码如下:

        .a {
            grid-column: 3 / 4;
            grid-row: 3 / 4;
        }

        .b {
            grid-column: 3 / 4;
            grid-row: 1 / 2;
        }

        .c {
            grid-column: 5 / 6;
            grid-row: 1 / 2;
        }

        .d {
            grid-column: 7 / 8;
            grid-row: 1 / 2;
        }

        .e {
            grid-column: 1 / 2;
            grid-row: 3 / 4;
        }

        .f {
            grid-column: 1 / 2;
            grid-row: 1 / 2;
        }

        .g {
            grid-column: 5 / 6;
            grid-row: 3 / 4;
        }

        .h {
            grid-column: 7 / 8;
            grid-row: 3 / 4;
        }

        .i {
            grid-column: 1 / 2;
            grid-row: 5 / 6;
        }

        .j {
            grid-column: 3 / 4;
            grid-row: 5 / 6;
        }

有没有更简单的写法呢?
有,还记得网格区域吗?一个单元格也是一个简单的网格区域,网格区域也是由四条网格线组成,顺序是row-start / column-start / row-end / column-end 。
那么上面的代码我们又可以简写成:

        .a {
            grid-area: 1 / 1 / 2 / 2;
        }

        .b {
            grid-area: 1 / 3 / 2 /4;
        }

        .c {
            grid-area: 1 / 5 / 2 / 6;
        }

        .d {
            grid-area: 1 / 7 / 2 / 8;
        }

        .e {
            grid-area: 3 / 1 / 4 / 2;
        }

        .f {
            grid-area: 3 / 3 / 4 / 4;
        }

        .g {
            grid-area: 3 / 5 / 4 / 6;
        }

        .h {
            grid-area: 3 / 7 / 4 / 8;
        }

        .i {
            grid-area: 5 / 1 / 6 / 2;
        }

        .j {
            grid-area: 5 / 3 / 6 / 4;
        }

FireFox上开启网格布局

网格轨道(Grid Track)

两个相邻网格线之间的空间。你可以把它们想象成网格的列或行。下图所示的是第二行和第三行网格线之间的网格轨道。

图片 28

网格轨道

合并单元格

下面是一个简单的布局页面:

图片 29

Paste_Image.png

用上面的方式我们可以这样写:

         .a {
            grid-column: 1 / 6;
            grid-row: 1 / 2;
        }

        .b {
            grid-column: 7 / 8;
            grid-row: 1 / 10;
            background: orange;
        }

        .c {
            grid-column: 1 / 2;
            grid-row: 3 / 4;
        }

        .d {
            grid-column: 3 / 4;
            grid-row: 3 / 4;
        }

        .e {
            grid-column: 5 / 6;
            grid-row: 3 / 4;
        }

        .f {
            grid-column: 1 / 4;
            grid-row: 5 / 6;
        }

        .g {
            grid-column: 5 / 6;
            grid-row: 5 / 6;
        }

        .h {
            grid-column: 1 / 2;
            grid-row: 7 / 8;
        }

        .i {
            grid-column: 3 / 6;
            grid-row: 7 / 8;
        }

        .j {
            grid-column: 1 / 6;
            grid-row: 9 / 10;
        }

效果如下图:

图片 30

Paste_Image.png

除了使用网格线进行合并布局之外,我们还可以使用span这个关键字来进行合并单元格,按我的想法这个span可以理解成跨越 ,并且要记得start的位置;
例如:

       .a {
            grid-column: 1 / 6;
            grid-row: 1 / 2;
        }

如果用span这个关键字可以写成:

       .a {
            grid-column: 1 / span 5;  
            grid-row: 1 / span 1;
        }

从1开始算 跨越5个距离就是6 所以写成span 5;
另外span1 可以省略不写;
所以还可以写成:

          .a {
            grid-column: 1 / span 5;
            grid-row: 1;
        }

注意span和数组中间要留有空格;

CSS Grid Layout 发展过程

2010年由微软提出,最早在IE10实施

2011年4月首次公开草案

2015年3月2日Chrome支持

2016年9月29日成为W3C候选标准


图片 31

网格单元格(Grid Cell)

两个相邻的行和两个相邻的列之间的网格线空间。它是网格的一个"单位"。下面图片所示的是行网格线line 1
line 2与列网格线line 2line 3之间的网格单元格。

图片 32

网格轨道

Grid 

网格布局可以用这个模块实现许多不同的布局。网络布局可以将应用程序分割成不同的空间,或者定义他们的大小、位置以及层级。

就像表格一样,网格布局可以让Web设计师根据元素按列或行对齐排列,但他和表格不同,网格布局没有内容结构,从布使各种布局不可能与表格一样。例如,一个网格布局中的子元素都可以定位自己的位置,这样他们可以重叠和类似元素定位。

此外,没有内容结构的网格布局有助于使用流体、调整顺序等技术管理或更改布局。通过结合CSS的媒体查询属性,可以控制网格布局容器和他们的子元素,使用页面的布局根据不同的设备和可用空间调整元素的显示风格与定位,而不需要去改变文档结构的本质内容。

网格容器和网格项目

图片 33

grid 

网格线

图片 34

网格线

grid-template-columns / grid-template-rows;

图片 35

图片 36

网格间距 (grid-gap;)


FLEXBOX OR GRID?

Flexbox Layout定义一个维度,行或者列;(一维布局)

Grid Layout定义两个维度,行和列;(二维布局,你可以根据你的设计需求,将内容区块放置到任何你想要放的地方。那么不用多说,你应该知道哪一种更适合你的布局。)

图片 37

这样的布局不少见,很容易的就可以实现


FireFox上开启网格布局

网格区域(Grid Area)

网格区域为四条网格线所包围的总空间。 网格区域可以由任何数量的网格单元组成。下面图片所示的是行网格线line 1line3和列网格线line 1line 3之间的网格区域。

图片 38

网格区域

兼容性

图片 39

兼容性

caniuse众观下来,仅在IE10 上支持,而且也仅支持部分属性;


博客布局的重新设计

博客的布局是我们比较熟知的常用布局之一,有页眉(header),内容(content),侧边栏(sidebar),和页尾(footer)组成。我们接下来就围绕博客布局去介绍网格布局的基本概念。

图片 40

博客布局

网格属性目录(Grid Properties Table of Contents)

网格容器属性 网格项目属性
display grid-column-start
grid-template-columns grid-column-end
grid-template-rows grid-row-start
grid-template-areas grid-row-end
grid-column-gap grid-column
grid-row-gap grid-row
grid-gap grid-area
justify-items justify-self
align-items align-self
justify-content
align-content
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid

相关资料:

Grid规范:https://www.w3.org/TR/css-grid-1

Box Alignment规范:https://www.w3.org/TR/css-align-3

Flexbox规范:https://www.w3.org/TR/css-flexbox-1

Flexbox教程:http://www.w3cplus.com/blog/tags/157.html

Grid教程:http://www.w3cplus.com/blog/tags/355.html

Grid案例:http://codepen.io/collection/XmZoNW

Github:https://github.com/airen/grid-layout

Grid更多资源:  


未完……

先做一个小铺垫,之后待我研究网格线网格轨道网格单元格网格区域网格容器等等一些相关,再来补充本文。

网格布局术语

  • 网格容器
  • 网格线
  • 网格轨道
  • 网格单元格
  • 网格区域

网格容器的属性(Properties for the Grid Container)

网格容器

网格容器为其中的内容建立新的网格格式化上下文( grid formatting context ),网格容器构成了内部网格项的边界

图片 41

网格容器

display

将元素定义为网格容器,并为其内容建立新的网格格式上下文。
属性值:
grid : 声明一个块级的网格
inline-grid : 声明一个内联级的网格
subgrid:如果你的网格容器本身是一个网格项(即嵌套网格),你可以使用此属性来表示你希望其行/列的大小从其父项继承,而不是自定义属性。

.container{
   display: grid | inline-grid | subgrid;
}

column, float, clear, 和 vertical-align 元素对网格容器不起作用。

网格线

网格线是水平和垂直分隔线。 我们将使用它们来构建网格轨道,网格单元格和网格区域。 他们有一个数字索引,或者我们也可以给他们一个特定的名字。

图片 42

网格线

grid-template-columns 和 grid-template-rows

使用以空格分隔的值定义网格的列和行。 这些值的大小表示轨道大小,它们之间的空间表示网格线。
属性值:
<track-size> :可以是一个长度、百分比或者是网格中自由空间的一小部分(使用fr单位)
<line-name> :你选择的任意名称

.container{
    grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
    grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

示例:
当你在轨道值之间留有空格时,网络线就会自动分配数值名称:

.container{
    grid-template-columns: 40px 50px auto 50px 40px;
    grid-template-rows: 25% 100px auto;
}

图片 43

grid-numbers

但是你也可以显示命名,请参考括号语法中的行名称命名方式:

.container{
    grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
    grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

图片 44

grid-names

请注意,一条网格线可以具有有多个名称。例如,这里的第二行将有两个名字: row1-endrow2-start:

.container{
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

如果你的定义中包含重复的部分,你可以使用 repeat()标识进行精简:

.container{
  grid-template-columns: repeat(3, 20px [col-start]) 5%;
}

等同于:

.container{
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
}

fr单位允许你将轨道的大小设置为网格容器的可用空间的一小部分。 例如,如下所示把每个项目设置为网格容器宽度的三分之一:

.container{
  grid-template-columns: 1fr 1fr 1fr;
}

这里可用空间表示除去非弹性项后剩余的空间。在此示例中的fr单位的可用空间表示减去50px以后的空间大小:

.container{
  grid-template-columns: 1fr 50px 1fr 1fr;
}

网格轨道

网格轨道是两条线之间的垂直或水平空间。

图片 45

网格轨道

grid-template-areas

通过使用grid-area属性来定义网格区域名称,从而定义网格模板。网格区域重复的名称就会导致内容跨越这些单元格。句点表示一个空单元格。语法本身提供了一种可视化的网格结构。
属性值:
<grid-area-name> -:使用grid-area属性定义网格区域名称
. :句点表示一个空的单元格
none - 表示无网格区域被定义

.container{
  grid-template-areas: "<grid-area-name> | . | none | ..."
                       "..."
}

示例:

.item-a{
  grid-area: header;
}
.item-b{
  grid-area: main;
}
.item-c{
  grid-area: sidebar;
}
.item-d{
  grid-area: footer;
}
.container{
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: "header header header header"
                       "main main . sidebar"
                       "footer footer footer footer"
}

这将创建一个四列三行的网格。最上面的一行为header区域。中间一行由两个main区域,一个空单元格和一个sidebar区域。最后一行是footer区域。

图片 46

grid-template-areas

你所声明的每一行都需要具有相同数目的单元格。
你可以使用任意数量的句点(.)声明单个空单元格。只要句点之间没有空格它们就表示一个空单元格。
注意,你只是使用此语法进行网格区域命名,而不是网格线命名。当你使用此语法时,区域两边的线就会得到自动命名。如果网格区域名称为foo,则其行线和列线的名称就将为foo-start,最后一行线及其最后一列线的名字就会为foo-end。这意味着一些线就可能具有多个名称,如上面示例中所示,拥有三个名称:header-start,main-start, 以及footer-start

网格单元格

网格单元是在两个相邻的水平网格线和两个相邻的垂直网格线之间的项目。 它是我们可以把内容放入的最小单位。

图片 47

网格单元格

grid-column-gap 和 grid-row-gap

指定网格线的大小。你可以把它想像成在行/列之间设置间距宽度。
属性值:
<line-size> : 一个长度值

.container{
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}

示例:

.container{
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px;   
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

图片 48

grid-column-row-gap

间距仅仅在列/行之间产生,而不会在边缘区。

网格区域

图片 49

网格区域

grid-gap

grid-column-gapgrid-row-gap的简写值。
属性值:
<grid-column-gap> 和<grid-row-gap> : 长度值

.container{
  grid-gap: <grid-column-gap> <grid-row-gap>;
}

示例:

.container{
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px;   
  grid-gap: 10px 15px;
}

如果没有指定grid-row-gap属性的值,默认与grid-column-gap属性值相同

网格布局的完整实现

现在我们用网格布局实现一下博客布局:

<div class="blog">
  <div class="header">Header</div>
  <div class="content">Content</div>
  <div class="sidebar">Sidebar</div>
  <div class="footer">Footer</div>
</div>

首先我们要设置displaygrid属性,对于其他的设置,我使用绝对值(pixels)作为长度单位,当然,也有更好的其他尝试(例如百分比、em、rem、vw和vh)。
属性 grid-template-columnsgrid-template-rows将生成网格轨道划分最外面的网格容器。 这两个属性的值既可以用固定值也可以使用auto。

.blog {
  display: grid;
  grid-template-columns: 400px 20px 180px;
  grid-template-rows: 100px 20px 210px 20px 100px;
}

图片 50

Paste_Image.png

定义网格的外观,看下面的代码,以及代码下面的解释图片:

.header {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 4;
}
.content {
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 1;
  grid-column-end: 2;
}
.sidebar {
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 3;
  grid-column-end: 4;
}
.footer {
  grid-row-start: 5;
  grid-row-end: 6;
  grid-column-start: 1;
  grid-column-end: 4;
}

图片 51

我们也可以使用缩写:

.header {
  grid-row: 1 /2;
  grid-column: 1 /4;
}
.content {
  grid-row: 3 /4;
  grid-column: 1 /2;
}
.sidebar {
  grid-row: 3 /4;
  grid-column: 3 /4;
}
.footer {
  grid-row: 5 / 6;
  grid-column: 1 / 4;
}

怎么样才能更短呢?grid-area 遵循以下顺序: grid-row-start , grid-column-start, grid-row-end, grid-column-end

.header {
  grid-area: 1 / 1 / 2 / 4;
}
.content {
  grid-area: 3 / 1 / 4 / 2;
}
.sidebar {
  grid-area: 3 / 3 / 4 / 4;
}
.footer {
  grid-area: 5 / 1 / 6 / 4;
}

最终代码是这样的:

.wrapper {
  display: grid;
  grid-template-columns: 400px 20px 180px;
  grid-template-rows: 100px 20px 210px 20px 100px;
}
.header {
  grid-area: 1 / 1 / 2 / 4;
}
.content {
  grid-area: 3 / 1 / 4 / 2;
}
.sidebar {
  grid-area: 3 / 3 / 4 / 4;
}
.footer {
  grid-area: 5 / 1 / 6 / 4;
}

上面这个例子很容易让你对即将到来的CSS网格布局充满憧憬,它真的是很好玩的东西,它入门很简单,通俗易懂,使人非常容易接受。但是更深入的接触之后会发现其实网格布局是很复杂的,甚至超过了Flexbox,它足足有17个新特性,并且围绕着我们编写CSS的方式介绍了许多新的概念,所以为了理解这个新的规范,弄清实战中它是怎样工作的,我们用它来创建一个圣杯布局。


justify-items

沿着列轴对齐网格项中的内容(相反于align-items属性定义的沿行轴对齐)。此值适用于容器内所有的网格项。
属性值:
start : 内容在网格区域中左端对齐
end :内容在网格区域中右端对齐
center :内容在网格区域居中对齐
stretch :内容宽度占满整个网格区域(默认值)

.container{
  justify-items: start | end | center | stretch;
}

示例:

.container{
  justify-items: start;
}

图片 52

grid-justify-items-start

.container{
  justify-items: end;
}

图片 53

grid-justify-items-end

.container{
  justify-items: center;
}

图片 54

grid-justify-items-center

.container{
  justify-items: stretch;
}

图片 55

grid-justify-items-stretch

以上特性也可以使用justify-self属性对各个网格项进行设置。

什么是圣杯布局(Holy Grail Layout)

圣杯布局是一种网页布局,由四部分组成:一个页眉,页脚和一个主要内容区域,有两个侧边,每边一个。布局遵循一下规则:

  • 两边带有固定宽度中间可以流动(fluid)
  • 中心列最先出现在标记中
  • 所有三列不管其中内容如何变化,都应该是相同的高度
  • 页脚应该总是在浏览器视窗的底部,即便内容不填满整个适口的宽度
  • 响应式布局,在较小的视口中,各部分要进行折叠,宽度100%显示

圣杯布局在CSS中,如果不用任何Hack是很难去实现的。

align-items

沿行轴对齐网格项中的内容(相反于justify-items属性定义的沿列轴对齐)。此值适用于容器内所有的网格项。
属性值:
start : 内容在网格区域中顶端对齐
end :内容在网格区域中底部对齐
center :内容在网格区域居中对齐
stretch :内容宽度占满整个网格区域(默认值)

.container{
  align-items: start | end | center | stretch;
}

示例:

.container{
  align-items: start;
}

图片 56

grid-align-items-start

.container{
  align-items: end;
}

图片 57

grid-align-items-end

.container{
  align-items: center;
}

图片 58

grid-align-items-center

.container{
  align-items: stretch;
}

图片 59

grid-align-items-stretch

以上特性也可以使用align-self属性对各个网格项进行设置。

用网格布局的解决方案

html

<body class="hg">  
  <header class="hg__header">Title</header>
  <main class="hg__main">Content</main>
  <aside class="hg__left">Menu</aside>
  <aside class="hg__right">Ads</aside>
  <footer class="hg__footer">Footer</footer>
</body>  

它的CSS只有31行!

.hg__header { grid-area: header; }
.hg__footer { grid-area: footer; }
.hg__main { grid-area: main; }
.hg__left { grid-area: navigation; }
.hg__right { grid-area: ads; }

.hg {
    display: grid;
    grid-template-areas: "header header header"
                         "navigation main ads"
                         "footer footer footer";
    grid-template-columns: 150px 1fr 150px;
    grid-template-rows: 100px 
                        1fr
                        30px;
    min-height: 100vh;
}

@media screen and (max-width: 600px) {
    .hg {
        grid-template-areas: "header"
                             "navigation"
                             "main"
                             "ads"
                             "footer";
        grid-template-columns: 100%;
        grid-template-rows: 100px 
                            50px 
                            1fr
                            50px 
                            30px;
    }
}

图片 60

Holy_Grail_CSS_Grid.gif

justify-content

如果你的网格项目都是使用像px这样的非响应式单位来计算的,就有可能出现一种情况--网格的总大小可能小于其网格容器的大小。 在这种情况下,您可以设置网格容器内的网格的对齐方式。 此属性沿着列轴对齐网格(相反于align-content属性定义的沿行轴对齐)。
属性值:
start -网格在网格容器中左端对齐
end - 网格在网格容器中右端对齐
center - 网格在网格容器中居中对齐
stretch - 调整网格项的大小,使其宽度填充整个网格容器
space-around -在网格项之间设置偶数个空格间隙,其最边缘间隙大小为中间空格间隙大小的一半
space-between - 在网格项之间设置偶数个空格间隙,其最边缘没有间隙
space-evenly - 在网格项之间设置偶数个空格间隙,其最边缘间隙与其相同

.container{
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;    
}

.container{
  justify-content: start;   
}

图片 61

grid-justify-content-start

.container{
  justify-content: end; 
}

![Uploading grid-justify-content-center]
](http://upload-images.jianshu.io/upload_images/1673685-51053776bcc7111a.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)

.container{
  justify-content: center;  
}

图片 62

grid-justify-content-center

.container{
  justify-content: stretch; 
}

图片 63

grid-justify-content-stretch

.container{
  justify-content: space-around;    
}

图片 64

grid-justify-content-space-around

.container{
  justify-content: space-between;   
}

图片 65

grid-justify-content-space-between

.container{
  justify-content: space-evenly;    
}

图片 66

grid-justify-content-space-evenly

分解代码

上面说过,CSS网格布局可以非常复杂,然后,我创建这个圣杯布局只用了17个新特性的4个:

  • grid-area
  • grid-template-areas
  • grid-template-columns
  • grid-template-rows

我们用这些网格属性去实现圣杯布局布局可分为5个步骤。

align-content

如果你的网格项目都是使用像px这样的非响应式单位来计算的,就有可能出现一种情况--网格的总大小可能小于其网格容器的大小。 在这种情况下,您可以设置网格容器内的网格的对齐方式。 此属性沿着行轴对齐网格(相反于justify-content属性定义的沿列轴对齐)。
属性值:
start -网格在网格容器中顶端对齐
end - 网格在网格容器中底端对齐
center - 网格在网格容器中居中对齐
stretch - 调整网格项的大小,使其宽度填充整个网格容器
space-around -在网格项之间设置偶数个空格间隙,其最边缘间隙大小为中间空格间隙大小的一半
space-between - 在网格项之间设置偶数个空格间隙,其最边缘没有间隙
Grid布局这样玩,网页布局的未来。space-evenly - 在网格项之间设置偶数个空格间隙,其最边缘间隙与其相同

.container{
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

示例:

.container{
  align-content: start; 
}

图片 67

grid-align-content-start

.container{
  align-content: end;   
}

图片 68

grid-align-content-end

.container{
  align-content: center;    
}

图片 69

grid-align-content-center

.container{
  align-content: stretch;   
}

图片 70

grid-align-content-stretch

.container{
  align-content: space-around;  
}

图片 71

Grid布局这样玩,网页布局的未来。grid-align-content-space-around

.container{
  align-content: space-between; 
}

图片 72

grid-align-content-space-between

.container{
  align-content: space-evenly;  
}

图片 73

grid-align-content-space-evenly

1.定义网格

我们要做的第一件事情就是确认网格的区域,所以我们可以在创建网格时通过这个别名来引用它们。 我们使用grid-area属性。

.hg__header { grid-area: header; }
.hg__footer { grid-area: footer; }
.hg__main { grid-area: main; }
.hg__left { grid-area: navigation; }
.hg__right { grid-area: ads; }

然后,使用grid-template-areas属性,我们可以用非常直观的方式指定网格的布局。 grid-template-areas属性接受一个空格分隔的字符串列表,每个字符串表示一行。 在每个字符串中,我们有一个空格分隔的网格区域列表,定义的每个网格区域占用一列。 因此,如果我们想要一个区域跨越两列,我们定义它两次。
在我们的圣杯布局中,我们有3列和3行。 页眉和页脚行横跨3列,而其他区域各跨1列。

.hg {
    display: grid;
    grid-template-areas: "header header header"
                         "navigation main ads"
                         "footer footer footer";
}                         

使用这个标记,我们得到以下的结果:

图片 74

定义网格

grid-auto-columns和 grid-auto-rows

指定任何自动生成的网格轨道(也称为隐式网格轨道)的大小。 当显式定位超出定义网格范围的行或列(通过grid-template-rows / grid-template-columns)时,将创建隐式网格轨道。
属性值:
<track-size> :可以是一个长度、百分比或者是网格中自由空间的一小部分(使用fr单位)

.container{
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}

为了说明隐式网格轨道是如何创建的,请思考一下:

.container{
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px
}

图片 75

grid-auto

这里创建了2x2的网格。
但现在试想一下你使用grid-columngrid-row来定位你的网格项如下:

.item-a{
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item-b{
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

图片 76

implicit-tracks

我们告诉.item-b在第列线 5开始,在列线6结束,但是我们从未定义过列线 5或6。因为我们引用了不存在的列,所以创建宽度为0的隐式轨道来填充这个间隙。 我们可以使用grid-auto-columnsgrid-auto-rows来指定这些隐式轨道的宽度:

.container{
  grid-auto-columns: 60px;
}

图片 77

implicit-tracks-with-widths

2.定义列宽

下一步,我们要定义的列的宽度。我们使用grid-template-columns属性定义列的宽度。该属性接受空格分格的宽度列表,网格中的每一列都有一个宽度。因为我们的布局有3列,我们可以指定3个宽度:

grid-template-columns: [column 1 width]  [column 2 width]  [column 3 width];  

对于圣杯布局,我们希望2个侧边宽度为150px。

.hg {
  grid-template-columns: 150px  [column 2 width] 150px;
}

我们还希望中间列占据空间的其余部分。 我们可以通过使用新的fr单位来做到这一点。 此单位表示网格中剩余的自由空间的一小部分。 在我们的例子中,剩余自由空间是网格的当前宽度减去300px(两个边栏的宽度)。

.hg {
    grid-template-columns: 150px 1fr 150px;
}

设置网格列之后,这是布局的样子 :

图片 78

定义列宽

grid-auto-flow

如果您有未明确放置在网格上的网格项,则自动布局算法会启动,以自动放置项。 此属性用来控制自动布局算法的工作原理。
属性值:
row : 告诉自动布局算法依次填充每一行,并根据需要添加新行
column :告诉自动布局算法依次填充每一列,并根据需要添加新列
dense : 告诉自动布局算法尝试在网格更早的时候填充接下来出现较小的项目留有的空白

.container{
  grid-auto-flow: row | column | row dense | column dense
}

请注意,dense可能会导致您的项目无序显示。
示例:
思考下面的HTML:

<section class="container">
    <div class="item-a">item-a</div>
    <div class="item-b">item-b</div>
    <div class="item-c">item-c</div>
    <div class="item-d">item-d</div>
    <div class="item-e">item-e</div>
</section>

这里定义了一个两列五行的网格,并将 grid-auto-flow属性设置为row(即默认值):

.container{
    display: grid;
    grid-template-columns: 60px 60px 60px 60px 60px;
    grid-template-rows: 30px 30px;
    grid-auto-flow: row;
}

当在网格上放置项目时,您只需要指定其中两个的网格项

.item-a{
    grid-column: 1;
    grid-row: 1 / 3;
}
.item-e{
    grid-column: 5;
    grid-row: 1 / 3;

因为我们将grid-auto-flow属性设置为了row,所以我们的网格看起来会像这个样子。注意我们没有进行设置的三个网格项(item-b, item-c and item-d),会沿行轴进行布局。

图片 79

grid-auto-flow-row

如果我们将grid-auto-flow属性设置为 column,item-b, item-citem-d 就会沿列轴进行布局。

.container{
    display: grid;
    grid-template-columns: 60px 60px 60px 60px 60px;
    grid-template-rows: 30px 30px;
    grid-auto-flow: column;
}

图片 80

grid-auto-flow-column

3.定义行高

接下来,我们要定义行的高度。 类似于我们grid-template-columns定义列宽,我们使用 grid-template-rows定义行高。此属性还接受用空格分隔列表。虽然我们可以写在一行,但是我认为一行一行去写会更加直观清楚。

.hg {
    grid-template-rows: 100px 
                        1fr
                        30px;
}

因此,我们的标题高度是100px,我们的页脚高度是30px,中间行(主要内容和两个侧边栏)占用.hg元素的剩余可用空间。

图片 81

定义行高

grid

在一行声明中设置一下所有属性的简写形式:grid-template-rows, grid-template-column, grid-template-areas, grid-auto-rows,grid-auto-columns, 以及 grid-auto-flow。它将grid-column-gapgrid-row-gap
属性设置为初始值,即使它们不能由此属性显式去设置。
属性值:
none: 将所有的子属性设置为初始值
subgrid: 将grid-template-rowsgrid-template-columns属性值设置为subgrid其余子属性设置为初始值
<grid-template-rows> / <grid-template-columns>: 将grid-template-rowsgrid-template-columns
分别设置为指定值,其余子属性设置为初始值
<grid-auto-flow>[<grid-auto-rows> [ / <grid-auto-columns>] ] : grid-auto-flow, grid-auto-rowsgrid-auto-columns属性分别接受相同的值,如果省略了grid-auto-columns属性,它将设置为grid-auto-rows属性的值。如果两者均被忽略,那么都将被设置为初始值。

.container{
    grid: none | subgrid | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]];
}

示例:
以下两个代码块是等效的:

.container{
    grid: 200px auto / 1fr auto 1fr;
}

.container{
    grid-template-rows: 200px auto;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: none;
}

以下两个代码块同样也是等效的:

.container{
    grid: column 1fr / auto;
}

.container{
    grid-auto-flow: column;
    grid-auto-rows: 1fr;
    grid-auto-columns: auto;        
}

它还接受一次性设置所有属性,更复杂但相当方便的语法。指定 grid-template-areas
, grid-auto-rowsgrid-auto-columns属性,其他所有子属性都将设置为其初始值。你现在所做的是在其网格区域内,指定网格线名称和内联轨道大小。这里最容易用一个例子来描述:

.container{
  grid: [row1-start] "header header header" 1fr [row1-end]
        [row2-start] "footer footer footer" 25px [row2-end]
        / auto 50px auto;
}

等同于:

.container{  
  grid-template-areas: "header header header"
                       "footer footer footer";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto; 
}
4.固定页脚

在圣杯布局中,我们希望页脚始终位于视口的底部,即使页面上的内容不被充满一屏。 为了实现这一点,我们可以将.hg元素的最小高度设置为视口的高度。

.hg {
    min-height: 100vh;
}

因为我们指定中间行应该填充剩余的可用空间,它会伸展到填满屏幕。

图片 82

固定页脚

网格项的属性(Properties for the Grid Items)

grid-column-start
grid-column-end
grid-row-start
grid-row-end
通过使用特定的网格线确定网格项在网格内的位置。grid-column-start/grid-row-start属性表示网格项的网格线的起始位置,grid-column-end/grid-row-end属性表示网格项的网格线的终止位置。
属性值:
**<line>
**: 可以是一个数字来指代相应编号的网格线,或者使用名称指代相应命名的网格线
span <number>: 网格项包含指定数量的网格轨道
span <name>: 网格项包含指定名称网格项的网格线之前的网格轨道
auto: 表明自动定位,自动跨度或者默认跨度为一

.item{
  grid-column-start: <number> | <name> | span <number> | span <name> | auto
  grid-column-end: <number> | <name> | span <number> | span <name> | auto
  grid-row-start: <number> | <name> | span <number> | span <name> | auto
  grid-row-end: <number> | <name> | span <number> | span <name> | auto
}

示例:

.item-a{
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start
  grid-row-end: 3
}

图片 83

grid-start-end-a

.item-b{
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2
  grid-row-end: span 2
}

图片 84

grid-start-end-b

如果没有声明grid-column-end/grid-row-end属性,默认情况下网格项的跨度为1。
网格项可以互相重叠。可以使用z-index属性控制堆叠顺序。
grid-column
grid-row
grid-column-start grid-column-end, 和grid-row-start grid-row-end属性分别的简写形式。
属性值:
<start-line> / <end-line>: 每一个属性均接收自定义的一个相同值,包括跨度。

.item{
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

示例:

图片 85

grid-start-end-c.png

.item-c{
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

如果没有声明结束网格线值,默认网格轨道跨度为1.
grid-area
属性值:
<name> - 你定义的名字
<row-start> / <column-start> / <row-end> / <column-end> - 可以是数字或者命名行
示例:
为网格项命名的一种方式:

.item-d{
  grid-area: header
}

grid-row-start grid-column-start grid-row-end grid-column-end属性的一种简写方式:

.item-d{
  grid-area: 1 / col4-start / last-line / 6
}

图片 86

grid-start-end-d

justify-self
沿列轴对齐网格项中的内容(相反于align-item属性定义的沿行轴对齐)。此值适用于单一网格项中的内容。
属性值:
start: 内容与网格区域的左端对齐
end: 内容与网格区域的右端对齐
center: 内容处于网格区域的中间位置
stretch: 内容宽度占据整个网格区域空间(默认值)

.item{ justify-self: start | end | center | stretch;}

示例

.item-a{
  justify-self: start;
}
![grid-justify-self-start](http://upload-images.jianshu.io/upload_images/1673685-7852d1a5d23c8293.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)

.item-a{
  justify-self: end;
}

图片 87

grid-justify-self-end

.item-a{
  justify-self: center;
}

图片 88

grid-justify-self-center

.item-a{
  justify-self: stretch;
}

图片 89

grid-justify-self-stretch

设置网格中所有网格项的对齐方式,可以使用网格容器上的justify-items属性。

align-self
沿行轴对齐网格项中的内容(相反于justify-item属性定义的沿列轴对齐)。此值适用于单一网格项中的内容。
属性值:
start: 内容与网格区域的顶端对齐
end: 内容与网格区域的底部对齐
center: 内容处于网格区域的中间位置
stretch: 内容高度占据整个网格区域空间(默认值)

.item{
  align-self: start | end | center | stretch;
}

示例:

.item-a{
  align-self: start;
}

图片 90

grid-align-self-start

.item-a{
  align-self: end;
}

图片 91

grid-align-self-end

.item-a{
  align-self: center;
}

图片 92

grid-align-self-center

.item-a{
  align-self: stretch;
}

图片 93

grid-align-self-stretch

本文翻译自 http://chris.house/blog/a-complete-guide-css-grid-layout/#prop-grid-template-areas
转载请注明英文原版出处

5.设置响应式

最后,我们想让布局响应。 在较小的设备上,所有网格项目应该一个接一个地显示在一列中。 为此,我们需要重新定义之前定义的3个属性:
grid-template-areasgrid-template-columnsgrid-template-rows
首先,我们想要网格中的所有项目按照特定的顺序在一个列中:

@media screen and (max-width: 600px) {
    .hg {
        grid-template-areas: "header"
                             "navigation"
                             "main"
                             "ads"
                             "footer";
    }
}

接下来,我们想要所有项目占满网格宽度的100%:

@media screen and (max-width: 600px) {
    .hg {
        grid-template-columns: 100%;
    }
}

最后,我们需要重置每一行的高度。 除了主行之外,所有行限定它的高度:

@media screen and (max-width: 600px) {
    .hg {
        grid-template-rows: 100px /* Header */
                            50px /* Navigation */
                            1fr /* Main Content */
                            50px /* Ads */
                            30px; /* Footer */
    }
}

图片 94

设置响应式

完成!在这里你可以看到它的演示和源码(你可能需要在浏览器中启用实验性的网络功能来查看它)

Grid Layout Module vs Flexbox

Flexbox适用于许多布局和很多“页面组件”元素,因为它们大多是基本线性的。 Grid适用于整体页面布局,以及非线性的复杂页面组件。
这两个可以任意组合,所以一旦广泛支持,我相信大多数页面将由一个外部网格的整体布局,混合嵌套flexbox和网格的页面组件,最后block/ inline-block /table布局在页面装饰文本和内容。

网格布局资源

上面讲的两种布局只使用了网格布局的4种属性,没有涵盖所有的网格布局概念和语法,如果对网格布局有兴趣,可以去下面的资源中更深入学习:

CSS Grid Layout Module spec

A Complete Guide to CSS Grid Layout

CSS Grid Layout Examples
Grid by Example

The future of layout with CSS: Grid Layouts

还有Rachel Andrew的关于网格布局的最新信息和资源。 她为网格布局做了许多贡献。

总结

正如你所看到的,即将到来的CSS网格布局是强大的,因为它的代码简洁易懂,你很容易去设计和改变布局顺序。这些功能可以帮助我们永久改变网络开发中创建布局的方式,所以,我相信网格布局是CSS布局的未来!

http://chris.house/blog/a-complete-guide-css-grid-layout/

https://en.wikipedia.org/wiki/Holy_Grail_(web_design))

https://bitsofco.de/holy-grail-layout-css-grid/

https://www.sitepoint.com/introduction-css-grid-layout-module/

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:Grid布局这样玩,网页布局的未来

关键词: