CSS Grid
布局,是一个基于网格的二维布局系统,目的是用来优化用户界面设计。
不过,目前任何浏览器默认是不支持Grid
布局的,但幸运的是,我们可以设置Chrome、Opera或者Firefox的特殊标志来启用它。在Chrome或Opera中,在地址栏中输入chrome://flags(opera://flags)
,然后将experimental web platform features
选项设置为enable
;在Firefox中,将layout.css.grid.enabled
选项设置为可用。
兼容性:Grid布局兼容性
注意!注意!重磅消息,在2017年3月左右,大部分浏览器都会开始默认支持Grid
布局,所以,现在完全有必要开始学习Grid
布局。
网上关于Grid
布局的资料已经很多了,本文只是用来记录一下Grid布局的相关属性和用法,防止别人的网站在某一天挂掉。
1、启用网格容器
我们使用display
属性来定义一个网格容器,它的grid
值决定了容器展现为块级还是内联形式。一旦启用网格容器,它的所有子元素都进入grid
文档流,称为网格子项。
display: grid | inline-grid | subgrid复制代码
复制代码
grid
:定义一个块级的网格容器inline-grid
:定义一个内联的网格容器subgrid
:定义一个继承其父级网格容器的行和列的大小的网格容器,它是其父级网格容器的一个子项。
注意:column, float, clear和vertical-align
对网格容器没有效果。
简单术语介绍:
每一块表示一个网格子项(网格单元),4个(任意数量)网格子项组成了网格区域。
2、网格容器的属性
2.1 grid-template-columns/grid-template-rows
词法:
grid-template-columns: <track-size> ... | <line-name> <track-size> ...;grid-template-rows: <track-size> ... | <line-name> <track-size> ...;复制代码
复制代码
<track-size>
:定义网格单元的宽高,其单位可以是一个长度(如px、em、rem、vw、vh)或百分比,也可以是网格中自由空间的份数(单位为fr)。<line-name>
:定义网格线的名称,它不是必须值。可以一个你选择的任意名字,当没有显示设定时,它的名字以数字表示。
实例: 当你在轨迹值中间留空格,网格线将被自动以数字命名:
.container{ grid-template-columns: 40px 50px auto 50px 40px; grid-template-rows: 25% 100px auto;}复制代码
复制代码
当然,我们还可以给网格线指定一个名字:
.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]; }复制代码
复制代码
注意:网格线命名时必须加上中括号
一根网格线还可以有多个名字,以空格隔开,中括号包裹:
.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
fr单元允许你将网格容器中的自由空间设置为一个份数:
.container{ grid-template-columns: 1fr 1fr 1fr; }复制代码
复制代码
在上面的代码中,将网格容器的每个子项设置为三分之一。
注意:自由空间是在固定子项确定后开始计算的
.container{ grid-template-columns: 1fr 50px 1fr 1fr; }复制代码
复制代码
在上面的代码中,自由空间是fr
单位的总和但不包括50px。
2.2 grid-template-areas
grid-template-areas可以配合 grid-area
定义一个显式的网格区域。grid-template-areas
定义网格区域,然后使用grid-area
调用声明好的网格区域名称来放置对应的网格项目。
词法:
grid-template-areas: "<grid-area-name> | . | none | ..." "..." 复制代码
复制代码
<grid-area-name>
:在grid-area
中指定的网格区域名字.
:一个句点表示一个空的网格单元none
:没有网格区域被定义
实例:
<div class="container"> <div class="item-a"></div> <div class="item-b"></div> <div class="item-c"></div> <div class="item-d"></div> </div>复制代码
复制代码
设置CSS样式:
.item-a{ grid-area: header; } .item-b{ grid-area: main; } .item-c{ grid-area: sidebar; } .item-d{ grid-area: footer; } .container{ width: 300px; height:200px; display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto; grid-template-areas: "header header header header" "main main . sidebar" "header footer header footer"; }复制代码
复制代码
在上面的代码中,我们将创建一个4乘以3的网格容器,第一行由header区域组成,中间一行由 2 个main区域和1个空单元和1个sidebar区域组成,最后一行由footer区域组成。
2.3 grid-column-gap/grid-row-gap/grid-gap
指定网格线的大小,也可以说是网格子项之间的间距。
词法:
grid-column-gap: <line-size>grid-row-gap: <line-size>复制代码
复制代码
<line-size>
:长度值
grid-gap是grid-column-gap
和 grid-row-gap
的简称:
grid-gap: <grid-column-gap> <grid-row-gap>复制代码
复制代码
如果只有一个值,grid-row-gap
的值将和grid-column-gap
一样。
实例:
.container{ display:grid; grid-template-columns: 100px 50px 100px; grid-template-rows: 80px auto 80px; grid-column-gap: 10px; grid-row-gap: 15px; }复制代码
复制代码
注意:间隔仅仅作用在网格子项之间,不作用在容器边缘。
2.4 justify-items/align-items
justify-items
让网格子项的内容和列轴对齐(align-items
则相反,是和行轴对齐),这个值对容器里面的所有网格子项都有用。
justify-items: start | end | center | stretch复制代码
复制代码
start
:内容和网格区域的左边对齐end
:内容和网格区域的右边对齐center
:内容和网格区域的中间对齐stretch
:填充整个网格区域的宽度(默认值)
align-items
让网格子项的内容和行轴对齐,这个值对容器里面的所有网格子项都有用。
align-items: start | end | center | stretch;复制代码
复制代码
start
:内容和网格区域的顶部对齐end
:内容和网格区域的底部对齐center
:内容和网格区域的中间对齐stretch
:填充整个网格区域的高度(默认值)
2.5 justify-content/align-content
justify-content
如果用像px非弹性单位定义的话,总网格区域大小有可能小于网格容器,这时候你可以设置网格的对齐方式(垂直于列网格线对齐)。
justify-content: start | end | center | stretch | space-around | space-between | space-evenly ;复制代码
复制代码
start
:左对齐end
:右对齐center
:居中对齐stretch
:填充网格容器space-around
:在每个网格子项中间放置均等的空间,在始末两端只有一半大小space-between
:两边对齐,在每个网格子项中间放置均等的空间,在始末两端没有空间space-evenly
:网格间隔相等,包括始末两端
align-content
如果用像px非弹性单位定义的话,总网格区域大小有可能小于网格容器,这时候你可以设置网格的对齐方式(垂直于行网格线对齐)。
align-content: start | end | center | stretch | space-around | space-between | space-evenly 复制代码
复制代码
start
:顶部对齐end
:底部对齐center
:居中对齐stretch
:填充网格容器space-around
:在每个网格子项中间放置均等的空间,在始末两端只有一半大小space-between
:上下对齐,在每个网格子项中间放置均等的空间,在始末两端没有空间space-evenly
:在每个网格子项中间放置均等的空间,包括始末两端
2.6 grid-auto-columns/grid-auto-rows
自动生成隐式网格轨道(列和行),当你定位网格项超出网格容器范围时,将自动创建隐式网格轨道。
grid-auto-columns: <track-size>grid-auto-rows: <track-size>复制代码
复制代码
<track-size>
:可以是一个长度,百分比或者是一个网格中自由空间的份数(通过使用fr单位)
为了说明隐式网格轨迹如何被创建,思考一下这个:
.container{ grid-template-columns: 60px 60px; grid-template-rows: 90px 90px }复制代码
复制代码
在上面的代码中,我们创建了 2 x 2 的网格。
但现在想象你使用grid-column和grid-row
来定位你的网格子项,就像这样:
.item-a{ grid-column: 1 / 2; grid-row: 2 / 3; } .item-b{ grid-column: 5 / 6; grid-row: 2 / 3; }复制代码
复制代码
我们告诉.item-b在第 5 列网格线开始第 6 列网格线结束,但我们还没有定义第 5 或者第 6 列。因为我们引用的线不存在,0 宽度的隐式网格轨迹将被创建来填充这些空缺。我们可以使用grid-auto-columns
和grid-auto-rows
来指定这些隐式网格轨迹的宽度:
.container{ grid-auto-columns: 60px; }复制代码
复制代码
2.7 grid-auto-flow
在没有设置网格项的位置时,这个属性控制网格项怎样排列。
grid-auto-flow: row | column | row dense | column dense复制代码
复制代码
row
:按照行依次从左到右排列column
:按照列依次从上到下排列dense
:按先后顺序排列
来看看下面的例子:
<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>复制代码
复制代码
下面定义5列2行网格,同时定义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和item-d在行上是从左到右排列,如下:
如果我们设置 grid-auto-flow: column
,结果如下:
2.8 grid
grid是一种简写形式:
grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ];复制代码
复制代码
3、网格子项的属性
3.1 grid-column-start/grid-column-end/grid-row-start/grid-row-end/grid-column/grid-row
通过网格线来定义网格项的位置。grid-column-start
、grid-row-start
定义网格项的开始位置,grid-column-end
、grid-row-end
定义网格项的结束位置。
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 ;复制代码
复制代码
<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 }复制代码
复制代码
.item-b{ grid-column-start: 1; grid-column-end: span col4-start; grid-row-start: 2 grid-row-end: span 2 }复制代码
复制代码
grid-column是 grid-column-start
和grid-column-end
的简称;grid-row
是grid-row-start
和grid-row-end
的简称。
grid-column: <start-line> / <end-line> | <start-line> / span <value>; grid-row: <start-line> / <end-line> | <start-line> / span <value>;复制代码
复制代码
实例:
.item-c{ grid-column: 3 / span 2; grid-row: third-line / 4; }复制代码
复制代码
3.2 grid-area
给网格子项取一个名字以让它被由grid-template-areas
属性创建的模板引用。同时,这个属性还可以用来更简短地表示grid-row-start+ grid-column-start + grid-row-end+ grid-column-end
。
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;复制代码
复制代码
<name>
:选择的名字<row-start> / <column-start> / <row-end> / <column-end>
– 可以是网格线的数字或名字
实例:
作为分配一个名字给网格子项的一种方式:
.item{ .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 }复制代码
复制代码
3.3 justify-self/align-self
(1)justify-self
让网格子项的内容以列轴对齐(与之相反align-self
是跟行轴对齐),这个值可以应用在单个网格子项的内容中。
justify-self: start | end | center | stretch复制代码
复制代码
start
– 让内容在网格区域左对齐end
– 让内容在网格区域右对齐center
– 让内容在网格区域中间对齐stretch
– 填充着呢个网络区域的宽度(默认值)
(2)align-self
让网格子项的内容以行轴对齐(与之相反justify-self
是跟列轴对齐),这个值可以应用在单个网格子项的内容中。
align-self: start | end | center | stretch复制代码
复制代码
start
– 让内容在网格区域上对齐end
– 让内容在网格区域下对齐center
– 让内容在网格区域中间对齐stretch
– 填充着呢个网络区域的高度(默认值)
参数文章:
如有错误,欢迎指正!