Grid布局简介

时间 2019-11-09

标签 grid 布局简介繁體版

原文原文链接

Grid 布局是网站设计的基础，CSS Grid 是建立网格布局最强大和最简单的工具。css

轻松使用 Grid 布局提升开发效率，对复杂的网页结构布局更加灵活。html

1、概述

Grid 将网页划分红一个个网格，能够任意组合不一样的网格，作出各类各样的布局。网格是一组相交的水平线和垂直线，它定义了网格的列和行。咱们能够将网格元素放置在与这些行和列相关的位置上。算法

咱们比较熟悉的好比说坐标轴，坐标点；若是你看到上面这样一个网格首先想到是这不就是被淘汰的表格吗，表格之因此被淘汰最主要在性能方面，然而咱们不得不认可表格对于整个网页的布局来讲有必定的便利性。那么如今的网格布局就能够把表格里面的一些较好的方便的东西抽出来，而后把性能方面较差的地方去掉，因此说网格布局会成为未来互联网企业的一个热潮是有缘由的。浏览器

网格布局的优点

固定的位置和弹性的轨道的大小
复制代码

你可使用固定的轨道尺寸建立网格，好比使用像素单位。你也可使用好比百分比或者专门为此目的建立的新单位 fr来建立有弹性尺寸的网格。bash

元素位置
复制代码

你可使用行号、行名或者标定一个网格区域来精肯定位元素。网格同时还使用一种算法来控制未给出明确网格位置的元素。ide

建立额外的轨道来包含元素
复制代码

可使用网格布局定义一个显式网格，可是根据规范它会处理你加在网格外面的内容，当必要时它会自动增长行和列，它会尽量多的容纳全部的列。函数

对齐控制
复制代码

网格包含对齐特色，以便咱们能够控制一旦放置到网格区域中的物体对齐，以及整个网格如何对齐。工具

控制重叠内容
复制代码

多个元素能够放置在网格单元格中，或者区域能够部分地彼此重叠。而后能够CSS中的z-index属性来控制重叠区域显示的优先级。布局

Grid vs Flexbox

Grid 布局与 Flex布局有必定的类似性，均可以指定容器内部多个项目的位置。可是，它们也存在重大区别。Flex布局是轴线布局，只能指定"项目"针对轴线的位置，能够看做是一维布局。Grid布局则是将容器划分红"行"和"列"，产生单元格，而后指定"项目所在"的单元格，能够看做是二维布局。Grid布局远比Flex布局强大。不是说Grid布局取代Flex布局，实际上他俩能够很好的配合使用。性能

浏览器兼容

2、重要术语

网格容器（Grid Container）

元素应用display:grid;，它是其全部网格项的父元素。

<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>
复制代码

把 container 元素变成一个 grid(网格)，只要把其 display 设置为 grid。

CSS代码：

.container {
    display:grid;
}
复制代码

网格项（Grid Item）

网格容器的子元素，下面的item元素是网格项。

<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 Line）

组成网格项的分界线。

记住:网格线仅仅是咱们在定义网格容器的时候就产生的，跟咱们的网格项没有直接的关联。网格线是咱们在定义网格容器的时候伴随出来的虚拟的概念，也就是说在实际的HTML中是找不到这些线的。

网格轨道（Grid Track）

两个相邻的网格线之间为网格轨道。

网格轨道的特色是必定会顶到容器的边缘。网格轨道必然跟网格项没有关联。

网格单元（Grid Cell）

两个相邻的列网格线和两个相邻的行网格线组成的是网格单元。

网格区域（Grid Area）

4个网格线包围的总空间。

3、容器中的属性

一、dislpay属性

display:grid | inline-grid | subgrid;

将元素定义为grid container，并为其内容创建新的网格格式化上下文（grid formatting context）。

<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>
复制代码

.container {
    display:grid | inline-grid | subgrid;
}
复制代码

grid：生成块级网格。
inline-grid：生成行内网格。
subgrid：若是网格容器自己是网格项（嵌套网格容器），此属性用来继承其父网格容器的列、行大小。

注意

当元素设置了网格布局，column、float、clear、vertical-align属性无效。 display:subgrid;目前全部浏览器都不兼容。

二、grid-template属性

1）grid-template-columns / grid-template-rows

使用以空格分隔的多个值来定义网格的列和行。

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

注意：此属性用在容器（container）上面。

轨道大小 track-size：可使用css长度（px、em等）、百分比、或用分数（用 fr 单位）
网格线名字 line-name：能够选择任何名字

2）grid-template-areas

经过引用 grid-area 属性指定的网格区域(Grid Area) 名称来定义网格模板。

.container {
  grid-template-areas: none|
    "grid-area-name|. grid-area-name|. grid-area-name|. ..."
    "grid-area-name|. grid-area-name|. grid-area-name|. ..."
    "......";
}
复制代码

grid-area-name：使用 grid-area 属性设置的网格区域的名称
"."：点号表明一个空网格单元
none：没有定义网格区域

例如：

.container {
  grid-template-areas: 
    "head head head head"
    "main main . sidebar"
    "foot foot foot foot";
}
复制代码

以上例子强调如下几点：

第一：每一行都必定要用双引号括起来；

第二：每个值对应一个网格单元，千万不要上面写了4个，下面只写三个，这样的话就会出问题；

第三：每一个网格单元里的区域名称都以空格隔开；

第四：每一个引号后面是没有任何逗号或封号，仅仅是回车换行。

grid-template

在单个声明中定义 grid-template-rows、grid-template-columns、grid-template-areas的简写。就我的而言，仍是不要简写，由于简写以后可读性会变差一些。

.container {
  grid-template: none | subgrid | <grid-template-rows> / <grid-template-columns>;
}
复制代码

none：将三个属性都设置为其初始值。所谓初始值默认为一行一列一个区域，也就是说回归到块元素本质，就是一个块。网格布局某些方面来讲就是把咱们的一个块给它用一种格子的形式把他区分为多个格子，也能够理解成是多个块。
subgrid：把 grid-template-rows 和 grid-template-columns 设置为subgrid，而且 grid-template-areas 设置为初始值。简单强调一下，第一：所谓的把行跟列设置为subgrid就是说仍是得本身定义一下行和列，都本身定义了，就没必要再简写了；第二：把网格区域定义为初始值，就是每一个区域的大小都是一个网格单元，若是是这样其实就不必去定义它。subgrid是目前为止全部浏览器都不兼容，那么在这里它依然适用，因此跟你们说一下：不推荐你们使用，只需了解知道便可。
grid-template-rows / grid-template-columns：把 grid-template-rows 和 grid-template-columns 设置为指定值，与此同时，设置 grid-template-areas 为none

.container {
  grid-template:
    [row1-start] "head head head" 25px [row1-end]
    [row2-start] "foot foot foot" 25px [row2-end]
    / auto 50px auto;
}
复制代码

等同于

.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas: 
    "head head head" 
    "foot foot foot";
}
复制代码

不建议简写，避免混淆。

三、gap属性

grid-column-gap / grid-row-gap

指定网格线的大小，能够想象为设置列/行之间间距的宽度。也能够说是网格轨道之间的间距

.container {
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}
复制代码

line-size：一个长度值

grid-gap

grid-row-gap 和 grid-column-gap 的缩写。

.container {
  grid-gap: <grid-row-gap> <grid-column-gap>;
}
复制代码

说明

起初是用 grid-gap 属性来定义的，目前逐渐被 gap 替代。若是没有指定 grid-row-gap，则会被设置为与 grid-column-gap 相同的值。

四、items属性

justify-items

沿着行轴对齐网格内的内容。

.container {
  justify-items: start | end | center | stretch;
}
复制代码

start：内容与网格区域的左端对齐
end：内容与网格区域的右端对齐
center：内容位于网格区域的中间位置
stretch：内容宽度占据整个网格区域空间（这是默认值）

align-items

沿着列轴对齐网格内的内容。

.container {
  align-items: start | end | center | stretch;
}
复制代码

start：内容与网格区域的顶端对齐
end：内容与网格区域的底部对齐
center：内容位于网格区域的垂直中心位置
stretch：内容高度占据整个网格区域空间（这是默认值）

place-items

设置 justify-items 和 align-items 的简写形式。注意：书写顺序为先列轴属性值后行轴属性值。

.container {
  place-items: center;
}
复制代码

以上表示水平和垂直居中。

五、content属性

justify-content

设置网格容器内的网格沿着行轴对齐网格的对齐方式。

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

start：网格与网格容器的左边对齐
end：网格与网格容器的右边对齐
center：网格与网格容器的中间对齐
stretch：调整 grid item 的大小，让宽度填充整个网格容器
space-around：在 grid item 之间设置均等宽度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半
space-between：在 grid item 之间设置均等宽度的空白间隙，其外边缘无间隙
space-evenly：在每一个 grid item 之间设置均等宽度的空白间隙，包括外边缘

align-content

设置网格容器内的网格沿着列轴对齐网格的对齐方式。

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

start：网格与网格容器的顶部对齐
end：网格与网格容器的底部对齐
center：网格与网格容器的中间对齐
stretch：调整 grid item 的大小，让高度填充整个网格容器
space-around：在 grid item 之间设置均等高度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半
space-between：在 grid item 之间设置均等高度的空白间隙，其外边缘无间隙
space-evenly：在每一个 grid item 之间设置均等高度的空白间隙，包括外边缘

place-content

设置 align-content 和 justify-content 的简写形式。注意：书写顺序为先列轴对齐属性值后行轴对齐属性值。

六、grid-auto属性

grid-auto-columns / grid-auto-rows

指定自动生成的网格轨道（又名隐式网格轨道）的大小。

隐式网格轨道

隐式网格轨道在显示的定位超出指定网格范围的行或列时被建立。也就是说网格项超出，一种是太多了，还有一种分两种状况：若是说仅仅由于太多的话，咱们只须要控制行就能够了，列这一块的话确定是跟着上面是同样的。可是有时列也会超出，超出状况会在讲到网格项的地方提到过，当网格项肯定在网格单元或网格区域的时候是能够控制的，控制的时候除了网格区域的名字以外，它也能够经过地址条网格线来控制，可是这个线的名字若是是超过的时候就会出来，那么在这种状况下就会自动生成隐式网格轨道。

隐式网格轨道我的是不建议你们使用的，由于咱们的这个隐式网格咱们在容器当中通常来讲咱们在容器中统揽大局而后抠出局部，结果局部不禁大局控制反而影响大局，这就有点反客为主，喧宾夺主的意思了，那在控制起来势必会有混乱，因此隐式网格轨道不是特别提倡你们使用。

.container {
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}
复制代码

track-size：能够是一个长度值，一个百分比，或者一个自由空间的一部分（使用 fr 单位）

grid-auto-flow

控制自动布局算法的工做方式。

.container {
  grid-auto-flow: row | column | row dense | column dense
}
复制代码

row：告诉自动布局算法依次填充每行，根据须要添加新行（默认）
column：告诉自动布局算法依次填充每列，根据须要添加新列
dense：告诉自动布局算法，若是后面出现较小的 grid item，则尝试在网格中填充空洞

注意：dense 只会更改网格项的可视顺序，并可能致使它们出现乱序，这对可访问性不利。

七、grid属性

在单个属性中设置全部如下属性的简写： grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 和 grid-auto-flow 。

固然像左对齐、右对齐这些对齐方式等就不能简写在上面。就是说咱们能够把多少行多少列以及它的区域还有隐式轨道以及他的布局方式均可以简写到 grid 里面而且同时将 sets grid-column-gap 和 grid-row-gap设置为他们的初始值，即便它们不能被此属性显示设置。

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

none：将全部子属性设置为其初始值。
grid-template-rows / grid-template-columns：将 grid-template-rows 和 grid-template-columns 分别设置为指定值，将全部其余子属性设置为其初始值
grid-auto-flow [grid-auto-rows [/ grid-auto-columns]]：接受全部与 grid-auto-flow，grid-auto-rows 和 grid-auto-columns 相同的值。若是省略 grid-auto-columns，则将其设置为 grid-auto-rows指定的值。若是二者都被省略，则它们被设置为它们的初始值

.container {
  grid: [row1-start] "head head head" 1fr [row1-end]
        [row2-start] "foot foot foot" 25px [row2-end]
        / auto 50px auto;
}
复制代码

等价于：

.container {
  grid-template-areas: 
    "head head head"
    "foot foot foot";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;    
}
复制代码

简写形式就简单的作一个介绍，实际开发当中不建议简写形式。

4、CSS函数

repeat()
fit-content()
minmax()

一、repeat()

重复

跟踪列表的重复片断，容许大量显示重复模式的列或行以更紧凑的形式编写。

.container {
  grid-template-columns: repeat(repeat, values);
  grid-template-rows: repeat(repeat, values);
}
复制代码

可用范围：这个函数能够用在 CSS Grid 属性 grid-template-columns 和 grid-template-rows。

重复次数

number：整数，肯定确切的重复次数。
auto-fill：以网格项为准自动填充。
auto-fit：以网格容器为准自动填充。

值

length：非负长度。
percentage：相对于列轨道中网格容器的内联大小的非负百分比，以及行轨道中网格容器的块长度。
flex：单位为 fr 的非负维度，指定轨道弹性布局的系数值。
max-content：表示网格的轨道长度自适应内容最大的那个单元格。
min-content：表示网格的轨道长度自适应内容最小的那个单元格。
auto：做为最大值时，等价于 max-content。做为最小值时，它表示轨道中单元格最小长宽（由min-width/min-height）的最大值。

二、fit-content()

内容适配

根据公式min（最大大小、最大值（最小大小、参数））将给定大小夹紧为可用大小。

.container {
  grid-template-columns: fit-content([ <length> | <percentage> ]);
  grid-template-rows: fit-content([ <length> | <percentage> ]);
}
复制代码

值

length：一个绝对的长度。
percentage：相对于给定轴上可用空间的百分比。

三、minmax()

长宽范围

定义了一个长宽范围的闭区间。

minmax([ <length> | <percentage> | <flex> | min-content | max-content | auto ],
[ <length> | <percentage> | <flex> | min-content | max-content | auto ]);
复制代码

值（跟repeat的取值是同样的）

length：非负长度。
percentage：相对于列轨道中网格容器的内联大小的非负百分比，以及行轨道中网格容器的块长度。
flex：单位为 fr 的非负维度，指定轨道弹性布局的系数值。
max-content：表示网格的轨道长度自适应内容最大的那个单元格。
min-content：表示网格的轨道长度自适应内容最小的那个单元格。
auto：做为最大值时，等价于 max-content。做为最小值时，它表示轨道中单元格最小长宽（由min-width/min-height）的最大值。

例如：

.container {
  grid-template-columns: minmax(300px, 50px);
}
复制代码

minmax()这个函数前面‘300px’是最小值，后面‘50px’是最大值，也就是说范围是从小到大的。当最小值大于最大值时，最大值将被忽略，整列会成为最小值。

5、网格项上的属性

start / end ：规定每个网格项在那个区域当中
grid-area：跟网格区域同样
self：自身里面的对齐方式

start / end 和 grid-area 两个属性都是规划出一个网格区域，把网格项放在一个网格区域里面，惟一不一样的是 start / end 是经过网格线来规划出网格区域，而 grid-area 是经过网格区域在并列网格容器当中时就定义好的网格区域，而后直接来读取这个网格区域就能够了。

一、start / end 属性

grid-column-start / grid-column-end / grid-row-start / grid-row-end

使用特定网格线来肯定网格项(grid item)在网格内的位置。

.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
}
复制代码

属性值

line ：能够是一个数字来指代相应编号的网格线，也可以使用名称指代相应命名的网格线
span number ：网格项将跨越指定数量的网格轨道
span name ：网格项将跨越一些轨道，直到碰到指定命名的网格线
auto：自动布局，或者自动跨度，或者跨越一个默认的轨道

说明

若是没有声明 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 的简写形式。

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

我的建议：斜杠先后的空格千万不要省略，有时能够识别，有时不可识别，对于浏览器来讲小版本的话就会有差异。建议斜杠先后都要有空格。

属性值

start-line / end-line：每一个值的用法都和属性分开写时的用法同样

例如：

CSS代码以下：

.container > .item:nth-child(1) {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 4;
}
复制代码

等同于

.container > .item:nth-child(1) {
    grid-column: 2 / 4;
    grid-row: 2 / 4;
}
复制代码

等同于

.container > .item:nth-child(1) {
    grid-column: 2 / span 2;
    grid-row: 2 / span 2;
}
复制代码

二、grid-area 属性

网格区域

给 gird item 进行命名以便于使用 grid-template-areas 属性建立模板时来进行引用。

.item {
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}
复制代码

属性值

name ：grid-template-areas 中定义的命名
row-start / column-start / row-end / column-end：能够是数字，也能够是网格线的名字

例如：

CSS代码以下：

.container > .item-a {
    grid-area: row1-start / 2 / 3 / five;
}
复制代码

等同于

.container > .item-a {
    grid-column-start: 2;
    grid-column-end: five;
    grid-row-start: row1-start;
    grid-row-end: 3;
}
复制代码

例如：

CSS代码以下：

.container > .item-a {
    grid-column: 2 / span 2;
    grid-row: 2 / span 2;
}
复制代码

等同于

.container > .item-a {
    grid-area: 2 / 2 / 4 / 4;
}
复制代码

三、self 属性

justify-self

沿着行轴对齐 grid-item 里的内容。

.item {
  justify-self: start | end | center | stretch;
}
复制代码

属性值

start：将内容对齐到网格区域的左端
end：将内容对齐到网格区域的右端
center：将内容对齐到网格区域的中间
stretch：填充网格区域的宽度（这是默认值）

align-self

沿着列轴对齐 grid-item 里的内容。

.item {
  align-self: start | end | center | stretch;
}
复制代码

属性值

start：将内容对齐到网格区域的顶部
end：将内容对齐到网格区域的底部
center：将内容对齐到网格区域的中间
stretch：填充网格区域的高度（这是默认值）

本篇文章到此结束，欢迎提建议哈！

参考文献：

developer.mozilla.org/zh-CN/docs/…

www.html.cn/archives/85…

1. Grid布局简介
2. Grid 布局简介
3. Grid 布局介绍
4. Grid布局（网格布局）
5. Flex布局和Grid布局
6. 前端布局-----Grid布局
7. grid 布局（2）
8. Grid 布局
9. CSS3 grid布局
10. Grid布局
更多相关文章...
• ASP.NET Web Pages - 页面布局 - ASP.NET 教程
• ASP.NET MVC - 样式和布局 - ASP.NET 教程
• Github 简明教程
• Java Agent入门实战（一）-Instrumentation介绍与使用