Grid

1. 什么是 Grid 布局Grid 布局及网格布局，是一种新的 css 模型，个别是将一个页面划分成几个次要的区域，定义这些区域的大小、地位和档次等关系，是目前惟一一种 css 二维布局。 2. 和 flex 布局的区别 Grig 布局和 flex 布局时有实质性的区别的，flex 是一维布局，只能解决一个维度上的布局，一行或者是一列，然而 Grid 布局是二维布局，将容器划分成了 “行” 和” 列”，产生了一个个的网格，能够将网格元素放在行和列相干的地位上，从而达到了布局的目标。 flex 布局示例：grid 布局示例：3. grid 布局的概念首先咱们先看一个小例子，通过这个例子演示一些根底概念 运行后果：容器和我的项目咱们通过再元素上申明 display:grid 或者 display:inline-grid 来创立一个容器网格，这个元素的所有直系 3 子元素将成为网格我的项目。网格轨道grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列网格单元一个网格单元是在一个网格元素中最小的单位，上图中 One、Two、Three、Four… 都是一个个的网格单元网格线划分网格的线即为网格线。须要留神的是，咱们定义网格的时候，定义的是网格轨道。Grid 会主动创立编号的网格线来定位每一个元素，m 列有 m+1 根垂直的网格线，n 行有 n+1 根程度网格线。一般而言，是从左到右，从上到下，1，2，3 进行编号排序，从右到左，从下到上，则是依照 -1，-2，-3… 程序进行编号排下序。 源码附件曾经打包好上传到百度云了，大家自行下载即可～ 链接: https://pan.baidu.com/s/14G-b...提取码: yu27百度云链接不稳固，随时可能会生效，大家放松保留哈。如果百度云链接生效了的话，请留言通知我，我看到后会及时更新～演示地址前台演示地址：http://mer.crmeb.net后盾演示地址：http://mer.crmeb.net/admin

grid布局,在less文件里写grid-column:1/6，会主动被计算成0.16。 解决办法:1.应用1/span 62.应用~"1/6"

1：基本布局Grid 布局是二维的基于网格的布局系统，它可以同时处理列和行（这是对比flex弹性盒模型布局而言）；第一个专门为解决布局问题而生的CSS模块。 几个基本概念： Grid Container，又叫做Grid容器，就是设置了display：grid的元素。 .main{ display:grid; }Grid Item，又叫做Grid容器成员，Grid容器下面的直接子元素。 Gird Line，Grid容器行和列的网格线；它又分为垂直网格线（column grid lines）和水平网格线（row grid lines）。 Gird Track，两个相邻网格线之间的空间。 Grid Cell，两个相邻的行和两个相邻的列网格线之间的空间，基础单元。 Grid Area，四个网格线包围的总空间，可以由任意数量的Grid Cell组成。 2：浏览器兼容3：Grid容器 (Grid Container) 属性常用的属性有14个： display，分为grid（块级网格）和inline-grid（行级网格） .main { display: grid; } .main { display: inline-grid; }grid-template-columns/rows，定义了网格的行和列 .main{ grid-template-columns: [<Grid Line Name>] <Grid Track Size> ...; grid-template-rows: [<Grid Line Name>] <Grid Track Size> ...;}基本语法 .main { display: grid; grid-template-columns: [columns-1] 100px [columns-2] 200px auto; grid-template-rows: [rows-1] 100px [rows-2] 200px;}重复 ...

翻译：疯狂的技术宅原文：https://css-tricks.com/using-... 未经许可，禁止转载！ 牧羊人很擅长照顾他们的羊群，为牧群带来秩序和结构。即使有几百只毛茸茸的动物，牧羊人仍然会在一天结束时将它们悉数带回农场。 而对于程序员来说，当我们在处理数据时，通常不知道这些数据是否已经被正确的过滤或者排序。尤其是当你想要在页面上按照稍微复杂一点的规则显示数据时，这就比较痛苦了。 Grid Shepherd 是一种使用 CSS Grid 帮助定位和排序的技术，完全不需要 JavaScript 的参与。 这就是本文要解决的问题。 Grid Shepherd 技术可以为我们的数据提供所需的顺序和结构，让我们更好地了解它的使用方式和应用场景。 让我们来深入研究一下。 用 JavaScript 排序我们首先针对农场中一系列无序的动物进行排序。想象一下牛和羊在农场中悠闲的样子。我们可以用 Array.prototype.sort 方法以编程方式对其排序分组并展示在页面上： let animals = [ { name: 'Edna', animal: 'cow' }, { name: 'Liam', animal: 'sheep' }, { name: 'Fink', animal: 'sheep' }, { name: 'Olga', animal: 'cow' },]let sortedAnimals = animals.sort((a, b) => { if (a.animal < b.animal) return -1 if (a.animal > b.animal) return 1 return 0})console.log(sortedAnimals)/* Returns: [ { name: 'Elga', animal: 'cow' }, { name: 'Olga', animal: 'cow' }, { name: 'Liam', animal: 'sheep' }, { name: 'Fink', animal: 'sheep' } ]*/认识 Grid ShepherdGrid Shepherd 方法能够在不依赖 JavaScript 的情况下实现对数据的排序，只依靠 CSS Grid 本身就可以做到。 ...

阮一峰的网格布局（grid）教程于3月25号发布,正好学习一波grid布局。虽然grid布局还不能够支持商用,扩展一下知识面也是好的。grid布局在主流浏览器的支持情况can i use查看grid号称是史上最强大的布局方案，它将网页划分成一个个小网格，可以任意组合不同的网格,做成各式各样的布局。grid布局和flex布局不同，flex布局是一维布局，只能改变项目的轴线位置。grid布局是二维布局,将容器划分成行和列,产生单元格,然后指定项目所在的单元格。容器属性display属性display:grid 指定一个容器采用网格布局。div{ display:grid}默认情况下容器都是块级元素,但也可以设置成行内元素。div{ diplay:inline-grid;}注意:设置成网格布局之后，容器的float、display:inline-block、display:inline-cell、vertical-align和column-*等设置都失效。grid-template-columns属性和grid-template-rows属性容器指定为网格布局之后,就要设置列宽 grid-template-columns、行高 grid-template-rowsdiv{ display:grid; grid-template-columns:100px 100px 100px; grid-template-rows:100px 100px 100px;}//指定了三行三列的网格,列宽和行高都是100px。除了设置px还可以用百分比div{ display:grid; grid-template-columns:33.3% 33.3% 33.3%; grid-template-rows:33.3% 33.3% 33.3%;}repeat()网格特别多的时候可以用repeat函数简化重复的值。div{ display:grid; grid-template-columns:repeat(3,33.3%); grid-template-rows:repeat(3,33.3%);}repeat()接受2个参数,第一个参数是重复的次数,第二个参数是所要重复的值。repeat()重复某种模式也是可以的grid-template-columns:repeat(2, 100px 20px 80px);auto-fill关键字有时候单元格大小是固定的，但是容器大小是不确定的,如果希望每一行或每一列容纳尽可能多的单元格,这时可以用auto-fill关键字表示自动填充。.container{ display:grid; grid-template-columns:repeat(auto-fill,100px)}//自动填充，每列宽100px;未完待续

前言在上篇——JavaScript五十问——对比来说CSS的Grid与FlexBox（上篇），我介绍了Flex的属性与使用，今天我们来总结一下Grid的具体使用方法，最后会结合Flex与Grid布局讲一讲二者的联系与不同。需要注意得是，Grid布局与我们之前所熟悉的css布局思路有很大的不同，阅读这篇文章之前，需要把我们平时对css的刻板印象抛弃掉，准备接受知识的洗礼吧，少年！Grid与 Flex 相同，Grid 也分为容器与元素两个概念；在一个 html 标签中添加样式：display：grid或者display：inline-grid，即构建了一个 Grid 的容器，里面的 dom 元素即为 Grid 元素。同样，Grid 也分为两类属性，分别装载在容器与元素上，下面一一说明。HTML结构说明以下所有例子均基于或扩展于下面的HTML结构：<style> .container{ width:500px; background-color:#999; } .item{ width: 50px; background-color:#567; color:#fff; } </style> <div class=“container”> <div class=“item”>1</div> <div class=“item”>2</div> <div class=“item”>3</div> <div class=“item”>4</div> <div class=“item”>5</div> </div>Grid 基本概念介绍网格Grid容器里面有网格一系列的概念；听着唬人，但是结合图很容易理解。网格线水平方向有垂直方向的线段即为网格线网格轨道两个相邻的平行网格线之间的区域就是网格轨道网格单元四个相邻边组成的区域就是网格单元。frfr是Grid中特有表示尺寸的单位，是分数——fraction的缩写，假设我们现在有四个grid元素，每个元素的宽度都是1fr，那么每个元素的实际宽度就是总宽度的1/4。fr也可以跟%，px 共同使用，他的计算规则就是刨去px与%的剩余空间作为fr分配空间，所有fr相加之和作为分母，分子为每个元素对应的fr的值。（当然，在Grid语境下，我们是不需要设置width属性的，这样说是为了让大家容易理解）。这样说来好像fr仅仅是%的另外一种写法，随着我的介绍，你就会发现fr优于%的地方。接下来，我还是以脑图为思路介绍Grid的各个属性。容器属性grid-templategrid-tempalte是三个属性的简写，这三个属性都是描述整块区域即多个网格单元的属性。grid-template-rowsgrid-template-rows是描述横向的单元轨道属性的。可以试想一下，我们在一个Grid容器中，关于这个属性，我们关心的是什么呢？无非就是这个容器中有多少行，每行的高度；所以，这个属性就是让我们定义这些值得。先来看语法：grid-template-rows: <track-size> | <line-name> <track-size> …;这个属性除了可以定义轨道尺寸和个数之外，还允许我们定义两个轨道之间的网格线的名称，至于他的作用，我们先按下不表，先来看这个属性是怎样定义每个轨道的尺寸和轨道个数的。先来看一个例子：.container{ grid-template-rows:200px auto 1fr 1fr 20%; grid-row-gap:10px;//定义轨道之间的间距}grid-template-rows定义了五个值，表示Grid容器里面有五行，可以使用任意的定义尺寸的方式,效果如下其中auto值就表示元素的实际占用大小。Grid分配空间首先计算除了fr对应轨道的尺寸，然后将剩余尺寸按照比例分配给fr加持的元素。以上，我们在Grid容器里定义了五行容器轨道，当我们定义轨道过多时，可以使用repeat函数来减少我们的工作量，语法为：grid-template-rows:repeat(n, size)例子：.container{ grid-template-rows:repeat(5,1fr); grid-row-gap:10px;}上面就定义了五个网格轨道，每个轨道的高度是Grid容器高度的1/5。grid-template-columnsgrid-template-columns 与 grid-template-rows使用方法是一致的，这两个属性共同作用于Grid容器，相当于把Grid容器分割为mn个子区域。例子：.container{ grid-template-rows:repeat(3,1fr); grid-template-columns: repeat(2, 1fr)上面这个例子就会得到六个均等分的子区域。通过上面两个属性，相信大家对Grid布局有一个基本的认识了，想必对Grid二维布局的模式也有一些概念了，接下来才是Grid精彩之处，震撼灵魂的地方！grid-template-areas上面两个属性分别设置Grid行属性和列属性，grid-template-areas是设置Grid区域的。所谓区域是由一个或多个行、列、单元组成的一篇区域。首先看一下语法：.container { grid-template-areas: “<grid-area-name> | . | none | …” “…”;}其中grid-area-name表示网格区域的名称.表示空的网格区域none 表示没有定义网格区域在我们平时开发时，经常会出现上头下尾中间两栏布局的情况，下面我们使用grid-template-areas完成这样的布局。<style>.container{ display:grid; grid-template-rows:60px auto 60px; grid-template-columns:100px 1fr; grid-template-areas: “header header” “left right” “footer footer”;}.container .item:first-child{ grid-area: header;}.container .item:nth-child(2){ grid-area: left;}.container .item:nth-child(3){ grid-area: right;}.container .item:nth-child(4){ grid-area: footer;}</style>.container{ display:grid; grid-template-rows:60px 1fr 60px; grid-template-columns:100px 1fr; grid-template-areas: “header header” “left right” “footer footer”;}.container .item:first-child{ grid-area: header;}.container .item:nth-child(2){ grid-area: left;}.container .item:nth-child(3){ grid-area: right;}.container .item:nth-child(4){ grid-area: footer;}.container{ display:grid; grid-template-rows:60px 1fr 60px; grid-template-columns:100px 1fr; grid-template-areas: “header header” “left right” “footer footer”;}.container .item:first-child{ grid-area: header;}.container .item:nth-child(2){ grid-area: left;}.container .item:nth-child(3){ grid-area: right;}.container .item:nth-child(4){ grid-area: footer;}</style><div class=“container”> <div class=“item”>1</div> <div class=“item”>2</div> <div class=“item”>3</div> <div class=“item”>4</div></div>在Grid容器中，我们定义了6个网格单元，使用grid-tempalte-areas划分了header footer left right 四片区域；而在grid元素中，每个元素使用grid-area来指定元素所对应的grid区域。因此，我们虽然划分了6个单元，但可以使用四个元素来表示。是不是很神奇呢，更神奇的是，grid-area-name是支持中文定义的。以上grid-template的子属性就说完了，grid-template是以上那三个属性的简写方式，语法如下：grid-tempalte:<‘grid-template-rows’> / <‘grid-template-columns’>``grid-tempalte:[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?例如上面的例子可以这样简写grid-template: “header header” 60px “left right” 1fr “footer footer” 60px / 50px 1fr;grid-gapgrid-gap用来描述Grid 区域之间间隙的尺寸大小。语法如下：.container { grid-gap: <grid-row-gap> <grid-column-gap>;}grid-gap是简写属性，也可以分别定义grid行间隔和grid 列间隔。.container{ grid-row-gap:10px; grid-column-gap:10px;}grid-gap与margin与padding不同，它不占用当前元素的盒模型的位置。上图显示的很清楚，3号元素的margin 与 padding 均为零。place-itemsplace-items 是 justify-items和align-items的简写方式这两个属性分别定义了Grid元素水平与垂直分布方式。语法如下： justify-items: stretch | start | end | center; align-items: stretch | start | end | center;对于这四个属性，默认stretch，相信读者在熟悉了Flex布局后都不会陌生，这里不多做解释，直接看例子，以align-items 为例：.container{ display:grid; grid-template: “header header” 160px “footer footer” 160px / 160px 160px; height:500px; grid-row-gap:10px; grid-column-gap: 10px;}首先定义四个grid单元，每个单元的长宽均为160px接下来我们更改align-items的值align-items:stretchalign-items:centeralign-items:startalign-items: end为了方便大家理解，我用红框框出每个Grid单元所占用的空间。由此可以看出，place-items属性是用来表明一个元素在当前grid单元中的分布方式，这个元素的拉伸，居中等都是以grid单元作为参考的。place-contentplace-content同样是一个简写属性，它包括：justify-content 和 align-content，它表示grid元素在grid容器中的分布方式，只有当grid容器中有剩余空间的时候才起作用。语法如下:justify-content: stretch | start | end | center | space-between | space-around | space-evenly;align-content: stretch | start | end | center | space-between | space-around | space-evenly;属性值得含义同Flex；这里不再过多说明，读者可以自行验证。grid-auto-rows 与 grid-auto-columnsgrid-auto-rows 和 grid-auto-columns；用于当实际的Grid的元素多余划分的Grid元素时，定义多余Grid元素的长宽;例如我们在HTML里面一定了五个Grid元素，但是在css中只定义了22的Grid单元，可以使用grid-auto来定义多出来的轨道的尺寸。grid-auto-flowgrid-auto-flow的用法需要结合下面的元素属性来说明。元素属性grid-column-start grid-column-end两个属性是用来定义Grid元素列方向上的起始与终止位置。语法格式为： grid-column-start: <number> | <name> | span <number> | span <name> | auto其中：number为起止第几条网格线name 为网格线的名称span <number>网格元素会跨越网格单元的数量span <name> 当前的网格元素会在哪一个网格线上开始or终止注意 使用span 如果是start，表示这个从开始的位置跨过的grid单元，如果是end 表示这个元素覆盖的grid单元。grid-column是它们的简写方式，语法为：grid-column:grid-column-start / grid-column-endgrid-row-start grid-row-endgrid-row属性与grid-column用法一致，这里不过多赘言，直接看例子：.container{ display:grid; grid-template-rows:[rone]1fr[rtwo]3fr[rthree]1fr[rfour]; grid-template-columns: [cone]1fr[ctwo]5fr[cthree]2fr[cfour]; height:500px;}.item:first-child{ grid-column-start:1; grid-column-end:cfour; grid-row-start:rone; grid-row-end: 2; }.item:nth-child(2){ grid-column-start:1; grid-column-end:span 1; grid-row-start:rtwo; grid-row-end: span cthree;}.item:nth-child(3){ grid-column-start: ctwo; grid-column-end:4; grid-row-start:rtwo; grid-row-end: span cthree;} .item:nth-child(4){ grid-column-start:1; grid-column-end:4; grid-row-start:3; grid-row-end: span 4;} 效果：首先在Grid容器中划分出9个grid单元，这九个单元被六个网格线所分割，并给这六个网格线命名。在四个Grid元素中定义横行的起始位置。grid-row 与 grid-column结合使用，可以起到与Grid-template-areas同样的效果。grid-areagrid-area我们在前面已经接触过一部分了，他与Grid容器中的grid-template-areas一起定义，也是grid-column与grid-row的简写属性，语法为： grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;name为grid区域的名称，与grid-tempalte-areas结合使用。上面我们的例子就可以用grid-area表示：.item:first-child{ grid-area:1/rone/2/cfour;}place-selfjustify-selfjustify-self定义Grid元素的水平布局方式的，例如，我们在Grid容器中定义justify-items的属性为默认属性，而在某一个Grid元素中定义justify-self为center，那么其他元素表现为拉伸，这个元素则单独表现为居中。也就是说，justify-self在Grid容器中对应的属性是justify-items。语法为：.item { justify-self: stretch | start | end | center;}algin-selfalign-self与justify-self一致，改变的是这个元素的垂直部署方式，与容器中align-items对应，语法为：.container { align-self: stretch | start | end | center;}由于这四个属性值已经在我们的系列文章中出现多次，这里不再多说。plac-self是以上两个属性的简写方式，语法为：.container { place-items: <align-self> / <justify-self>;}再论frGrid的所有属性已经介绍完毕了，在对Grid宇宙有了一个基本的认识后，我们再回头看一下Grid宇宙中出现的新尺寸单位——fr。可能大家在刚刚结仇到fr这个单位时，都会认为它是%的一个别名；但是，我们来看最下面的例子：我们在Grid容器中划分出四个Grid区域，并定义每个区域的宽度为25%，并定义每个Grid元素之间的gap宽70px；.container{ display:grid; grid-template-columns: repeat(4, 25%); grid-column-gap: 70px;}效果如下：很明显，这里元素溢出了。这种情况是我们不想看到的。下面，我们将25%替换为1fr看一下效果：效果对比很明显。而造成两者显著区别的原因是二者的计算空间方式的不同。使用百分比它的分母是父元素的width或者height，而fr的分母是父元素中剩余空间的尺寸；css会首先计算使用%和px定义的元素尺寸，剩下的空间再由fr元素进行比例分配。这就是使用fr不会出现元素溢出的情况。当然我们也可以使用calc避免溢出的尴尬，但是两种解决方案孰优孰略已经一目了然了。Flex 与 GridFlex布局与Grid布局有很多相似的地方，例如justify-content和justify-items的用法。但是更多的是不同，最重要的是Grid开拓了二维布局的方式，相比于传统的css布局方式（Flex、bootstrp 12列），Grid开创了网格的概念，用户可以从横纵两个方面部署元素。正是因为如此，在Grid宇宙中，传统的css布局、尺寸属性就显得格格不入了。而Grid布局的二维特性所带来的整体观，使Grid在页面级别样式上更加游刃有余。而Flex相比于Grid 更加适合小组件上的样式开发，二者并不冲突相信在Grid 与 Flex双双加持之下，一定会收获更好的开发效果！Grid布局还是一个较新潮的概念，我也是一般看资料学习，一边分享，由于缺少实际的开发经验，对于很多属性的应用场景还没有很深入的理解，故而有的属性一笔带过；如果我有理解不正确的地方，欢迎大家指正！参考文献MDN:Grid Layout张鑫旭：写给自己看的display: grid布局教程知乎：CSS 新的长度单位 fr 你知道么？What’s more：JavaScript五十问——对比来说CSS的Grid与FlexBox（上篇） ...

当我们在写页面时经常会遇到页面内容少的时候，footer会戳在页面中间或什么？反正就是不在最底部显示，反正就是很难看，下面要讲的布局就是解决如何使元素粘住浏览器底部，方法一：footer高度固定+绝对定位html<div class=“dui-container”><header>Header</header><main>Content</main><footer>Footer</footer></div>CSS.dui-container{position: relative;min-height: 100%;}main {padding-bottom: 100px;}header, footer{line-height: 100px;height: 100px;}footer{width: 100%;position: absolute;bottom: 0}查看效果方法二：在主体content上的下边距增加一个负值等于底部高度html<header>Header</header><main>Content</main><footer>Footer</footer>CSShtml, body {height: 100%;}main {min-height: 100%;padding-top: 100px;padding-bottom: 100px;margin-top: -100px;margin-bottom: -100px;}header, footer{line-height: 100px;height: 100px;}查看效果方法三：将页脚的margin-top设为负数html<header>Header</header><main>Content</main><footer>Footer</footer>CSSmain {min-height: 100%;padding-top: 100px;padding-bottom: 100px;}header, footer{line-height: 100px;height: 100px;}header{margin-bottom: -100px;}footer{margin-top: -100px;}查看效果方法四： 通过设置flex，将footer的margin-top设置为autohtml<header>Header</header><main>Content</main><footer>Footer</footer>CSSbody{display: flex;min-height: 100vh;flex-direction: column;}header,footer{line-height: 100px;height: 100px;}footer{margin-top: auto;}查看效果方法五： 通过函数calc()计算内容的高度html代码<header>Header</header><main>Content</main><footer>Footer</footer>CSS代码main{min-height: calc(100vh - 200px); /* 这个200px是header和footer的高度 */}header,footer{height: 100px;line-height: 100px;}查看效果方法六： 通过设置flexbox，将主体main设置为flexhtml<header>Header</header><main>Content</main><footer>Footer</footer>CSS代码body{display: flex;min-height: 100vh;flex-direction: column;}main{flex: 1}查看效果方法七： 使用grid布局Html代码<header>Header</header><main>Content</main><footer>Footer</footer>CSS代码html {height: 100%;}body {min-height: 100%;display: grid;grid-template-rows: auto 1fr auto;}.footer {grid-row-start: 3;grid-row-end: 4;}查看效果方法八： display-*html<header>Header</header><main>Content</main><footer>Footer</footer>CSSbody { min-height: 100%; display: table; width: 100%;}main { display: table-row; height: 100%;}查看效果 ...

基本介绍上一篇文章我们介绍了 css3 flexbox，今天我们再来说说css3的另外一个强大的功能：Grid。Grid做前端的同学应该都很熟悉了，翻译成中文为“栅格”，用过bootstrap、semantic ui、ant design的同学肯定都了解grid layout（删格布局），以往css框架中的grid布局一般是通过float和百分比的宽度实现的，这种实现有几种缺点：html不够简洁；需要清除浮动以避免高度塌陷；列的个数是固定的，不能灵活定义。比如bootstrap是12列，semantic ui是16列，ant design 24列。当然grid也可以用flex实现，但是并不会比用float简单多少，而且flex擅长的是一维空间的布局，而对grid这种二维空间并不擅长。现在css3从规范和标准层面实现了grid，编程体验大大提升！兼容性用法Grid作为一个二维的栅格系统，由若干列（column）和行（row）构成。1. Column(1) 设置columnCSS3中的Grid可以划分为任意个数的列（column），而且每个column的宽度可以任意设置！我们先来看一个简单的例子：html:<div id=“content”> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div></div>css:body{ color: #fff; text-align: center;}#content{ display: grid; grid-template-columns: 33.3% 33.3% 33.3%; max-width: 960px; margin: 0 auto;}#content div{ background: lightgrey; padding: 30px;}#content div:nth-child(even){ background: skyblue;}效果：当我们设置了display: grid和grid-template-columns: 33.3% 33.3% 33.3%后#content就被划分成了三行三列的grid，此时#content被称为grid container，而#content的子元素称为grid item。我们也可以任意改变column的个数和宽度，比如：#content{ grid-template-columns: 10% 20% 30% 40%;}效果：(2) fr（fraction）css3中引入了一个新的单位fr（fraction），中文意思为“分数”，用于替代百分比，因为百分比（小数）存在除不尽的情况，用分数表示可以避免多位小数的写法。比如三列等宽的grid可以表示为：grid-template-columns: 1fr 1fr 1fr;(3) repeat我们也可以用repeat方法来简化column或者row的写法，repeat方法接受两个参数，第一个参数表示重复的次数，第二个参数表示重复的内容。所以，三列等宽的grid我们还可以表示为：grid-template-columns: repeat(3, 1fr);当我们要定义的列数很多时，repeat就会变得非常有用，比如我们要定义一个10列等宽的grid，可以写成repeat(10, 1fr)，而不用将1fr重复书写10遍。2. Row(1) 设置row当我们设置column之后，row会因为元素的换行而自动产生，但是我们依然可以设置row的个数和高度。css：#content{ display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 60px); max-width: 960px;}效果：可以看到，虽然第四行没有内容，但是row确实存在并占据了那部分空间。(2) minmax上面的例子中我们给了row一个固定高度，这导致一个问题：如果某个grid item中的内容特别多，受制于固定的高度，部分内容将无法显示，如下图：为解决这个问题，css提供了minmax函数，让我们可以设置row的最小高度和最大高度，最大高度取auto后便可以让row的高度自适应：css：grid-auto-rows: minmax(60px, auto);// 或者grid-template-rows: repeat(3, minmax(60px, auto));效果：(3) grid gap如果我们想给行和列之间加上间隔，也有现成的方法：css:grid-gap:{ 10px;}效果：3. Grid Line以上所有例子中，grid中的每个grid item都是按默认顺序排列的。如果我们想重新布局改变grid item的位置或大小呢？为此引入了grid lines的概念，所谓的grid lines就是将grid若干等分后的分割线，如下图中横向和纵向序号1～8的线即为grid lines：<img src=“http://lc-jOYHMCEn.cn-n1.lcfi…; alt=“drawing” width=“500”/>通过定义grid item的起始和结束的grid line我们就可以实现对grid item位置和覆盖面积的控制。一个简单的例子：html：<div id=“content”> <div class=“one”>1</div></div>css: #content { display: grid; grid-template-columns: repeat(8, 100px); grid-template-rows: repeat(8, 100px); grid-gap: 10px;}.one { grid-column-start: 3; grid-column-end: 6; grid-row-start: 3; grid-row-end: 6;}效果：通过设置grid-column-start/end grid-row-start/end 相当于给grid item设置起始坐标和结束坐标，上面的css也可以简写为：.one { grid-column: 3 / 6; grid-row: 3 / 6;}// 或者.one { grid-area: 3 / 3 / 6 / 6;}如果grid item的起始grid line为默认，我们可以只设置它的跨度（span）:.one{ grid-column: span 3; grid-row: span 3;}4. Grid Area Template除了通过grid lines进行布局，css3提供了一种更牛逼的布局方式：grid area template。与其用语言解释什么是grid area template，不如直接看代码：html：<div id=“content”> <header>Header</header> <main>Main</main> <section>Section</section> <aside>Aside</aside> <nav>Nav</nav> <footer>Footer</footer></div>css:body { color: #fff; text-align: center;}#content { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(100px, auto); max-width: 960px; margin: 0 auto; grid-gap: 10px; grid-template-areas: “header header header header” “aside . main main” “nav . main main” “section section section section” “section section section section” “footer footer footer footer”;}#content>* { background: #3bbced; padding: 30px;}header { grid-area: header; }main { grid-area: main; }section{ grid-area: section; }aside { grid-area: aside; }nav { grid-area: nav; }footer { grid-area: footer; }效果：看明白没有？重点在于grid container的 grid-template-areas 属性。我们给每个grid item设置一个grid area，然后在grid container中设置一个grid area模版（grid-template-areas），模版中每行字符串表示一个row，每个area名称表示一个column，完全将几何布局用文字模拟出来，空白的grid item用 . 表示。当然使用grid area要注意语法严谨，像 “header main header main” 这种写法css是无法解析的，用area名称模拟出的结构在二维空间上必须是一个整体，因为每个grid item也是无法分割的。 使用grid area template的有点在实现响应式布局时也是显而易见的，我们只需要针对不同的屏幕尺寸制定不同的grid area template就行了。5. Justify and Align与flex类似，grid也可以设置justify和align来调整grid item横向和纵向对齐方式。同样也同时支持对grid container或单个grid item进行设置。对grid container设置html:<div id=“content”> <div class=“one”>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div></div>css:#content { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, minmax(120px, auto)); grid-gap: 10px; max-width: 960px; align-items: start; justify-items: end;}效果：注意：flex里面用的是 justify-content 而grid里面是 justify-items ，flex里面的值是 flex-start/flex-end ，而grid里面是 start/end 。justify和align的默认值都是 stretch 。对grid item设置css：.one{ align-self: start; justify-self: end;}效果：实践掌握了上述知识，我们就能用CSS3 Grid快速做出各种layout效果了，附上几个简单的codepen示例：12列grid布局花瓣式布局响应式布局 ...