愿你如阳光,明媚不忧伤。
目録
- 1. Grid 简介
- 2. 容器的属性
- 2.1 grid-template-columns / grid-template-rows / grid-template
- 2.2 grid-column-gap / grid-row-gap / grid-gap
- 2.3 justify-content / align-content / place-content【start】
- 2.4 justify-items / align-items / place-items
- 2.5 grid-auto-flow【row】
- 2.6 grid-template-areas / grid-areas
- 2.7 grid-auto-columns / grid-auto-rows
- 3. 项目的属性
友情链接 【命运只会眷顾努力的人】CSS(层叠样式表)教程,看完不迷茫了!!!
友情链接 【命运只会眷顾努力的人】CSS3(层叠样式表)教程,看完不迷茫了!!!
友情链接 【前端布局】Flex 弹性布局
1. Grid 简介
Grid 网格布局,将容器划分成行和列,从而产生了一个个的网格,我们可以将网格元素放在与这些行和列相关的位置上,可以任意组合不同的网格,做出各种各样的布局。相对于一维的 Flex 布局,Grid 可以看作是二维布局,比 Flex 布局更加强大。另外网格引入了 fr(fraction) 单位来帮助我们创建灵活的网格轨道。一个 fr 单位代表网格容器中可用空间的一等份。
- 基本概念
网格容器(grid container)是一组相交的水平线和垂直线,它定义了网格的行和列。
容器的所有直系子元素(直系子元素的子元素不包含在内)自动成为容器成员,称为 Grid 项目(grid item);
网格单元 :行和列的交叉区域,称为"单元格"(cell)一个网格单元是一个网格容器中最小的单位;
网格轨道 :一个网格轨道就是网格中任意两条线之间的空间。
网格区域 :网格容器可以向行或着列的方向扩展一个或多个单元,并且会创建一个网格区域。网格区域的形状应该是一个矩形,也就是说不可能创建出一个类似于"L"形的网格区域。
网格列 :容器里面的垂直区域称为"列"(column);
网格行 :容器里面的水平区域称为"行"(row);
网格间距 :指的是两个网格单元之间的网格横向间距或网格纵向间距。
网格线 :划分网格的线,称为"网格线"(grid line)。水平网格线划分出行,垂直网格线划分出列。
2. 容器的属性
首先,实现 grid 布局需要先指定一个容器,任何一个容器都可以被指定为 grid 布局,这样容器内部的元素就可以使用 grid 来进行布局。
我们可以生成一个块状或行内的 grid 容器盒子。简单说来,如果使用块元素如 div,可以使用 grid ,而如果使用行内元素,可以使用 inline-grid。
需要注意的是:项目只能是容器的顶层子元素,不包含项目的子元素。
当设置 grid 布局之后,子元素的 float、display: inline-block、display: table-cell、vertical-align 和 column-* 等属性将会失效。
.container {
display: grid; /* 块状元素 */
display: inline-grid; /* 行内元素 */
}
有下面十七种属性可以设置在容器上,它们分别是:
属性 | 说明 |
---|---|
grid-template-columns | 指定列的大小,以及网格布局中设置列的数量 |
grid-template-rows | 指定网格布局中行的大小,以及网格布局中设置行的数量 |
grid-template | grid-template-rows,grid-template-columns 和 grid-template-areas 的简写形式 |
grid-column-gap | 指定两个列之间的间距 |
grid-row-gap | 指定两个行之间的间距 |
grid-gap | grid-row-gap 和 grid-column-gap 的简写形式 |
justify-content | 用于对齐容器内的网格(网格的总宽度必须小于容器的宽度才能使 justify-content 属性生效) |
align-content | 用于设置垂直方向上的网格元素在容器中的对齐方式(网格元素的总高度必须小于容器的高度才能使 align-content 属性生效) |
place-content | align-content 属性和 justify-content 属性的合并简写形式 |
justify-items | 设置网格中的内容的水平位置(左中右) |
align-items | 设置网格中的内容的垂直位置(上中下) |
place-items | justify-items 和 align-items 的简写形式 |
grid-auto-flow | 指定自动布局算法怎样运作,精确指定在网格中被自动布局的元素怎样排列 |
grid-area | 指定网格元素的名称 |
grid-template-areas | 指定如何显示行和列,使用命名的网格元素 |
grid-auto-columns | 隐式网格默认的列尺寸 |
grid-auto-rows | 隐式网格默认的行尺寸 |
2.1 grid-template-columns / grid-template-rows / grid-template
auto 关键字表示由浏览器自己决定长度;
auto-fill 有时单元格的大小是固定的,但是容器的大小不确定。如果希望每一行(或每一列)容纳尽可能多的单元格,这时可以使用 auto-fill 关键字表示自动填充;
repeat() 接受两个参数,第一个参数是重复的次数,第二个参数是所要重复的值。重复某种模式也是可以的:grid-template-columns: repeat(2, 100px 20px 80px);
minmax() 函数产生一个长度范围,表示长度就在这个范围之中。它接受两个参数,分别为最小值和最大值。
===================================================================
/* 绝对单位 */
.container {
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
-------------------------------------------------------------------
/* 百分比单位 */
.container {
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;
}
-------------------------------------------------------------------
/* fr 单位 */
.container {
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
-------------------------------------------------------------------
/* auto-fill 关键字 */
.container {
grid-template-columns: repeat(auto-fill, 100px)
grid-template-rows: repeat(auto-fill, 100px)
}
-------------------------------------------------------------------
/* repeat() 函数 */
.container {
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);
}
-------------------------------------------------------------------
/* minmax() 函数 */
.container {
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
grid-template-rows: 1fr 1fr minmax(100px, 1fr);
}
===================================================================
- grid-template-columns / grid-template-rows
2.2 grid-column-gap / grid-row-gap / grid-gap
.container {
display: grid;
grid-template-columns: <length> | <percentage>;
grid-template-rows: <length> | <percentage>;
grid-gap: <grid-row-gap> <grid-column-gap>
}
- grid-gap
2.3 justify-content / align-content / place-content【start】
Flex 布局中有全部演示,不在赘述。
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
place-content: <align-content> <justify-content>
}
- place-content
place-content 也可以只指定一个值,浏览器会自动认为第二值等同于第一个值。
2.4 justify-items / align-items / place-items
.container {
justify-items: start | end | center | stretch | [ first | last ] baseline;
align-items: start | end | center | stretch | [ first | last ] baseline;
place-items: <align-items> <justify-items>
}
- justify-items: center; align-items: center;
2.5 grid-auto-flow【row】
row(默认):先行后列;
column:先列后行;
dense:紧密排列,尽量填满空闲的网格区域。
.container {
grid-auto-flow: [ row | column ] || dense;
}
- grid-auto-flow: column
- grid-auto-flow: row dense
2.6 grid-template-areas / grid-areas
grid-template-areas 属性用于定义区域,一个区域由一个或者多个单元格组成;
grid-area 属性指定项目放在哪一个区域;
.container {
grid-template-areas: <string>+;
grid-area: <string>+;
}
- grid-template-areas: string+
.
符号代表空的单元格,也就是没有用到该单元格。
.grid-template-areas-custom {
grid-template-areas:". header header"
"sidebar content content";
}
.grid-area-header {
grid-area: header;
}
.grid-area-sidebar {
grid-area: sidebar;
}
.grid-area-content {
grid-area: content;
}
2.7 grid-auto-columns / grid-auto-rows
首先要先了解一下显示网格和隐式网格:
显式网格包含了你在 grid-template-columns 和 grid-template-rows 属性中定义的行和列。
如果你在网格定义之外又放了一些东西,或者因为内容的数量而需要的更多网格轨道的时候,网格将会在隐式网格中创建行和列。
假如有多余的网格(也就是上面提到的隐式网格),那么它的行高和列宽可以根据 grid-auto-columns 属性和 grid-auto-rows 属性设置。它们的写法和grid-template-columns 和 grid-template-rows 相同。如果不指定这两个属性,浏览器会根据单元格内容的大小,自行决定新增网格的列宽和行高。
- grid-auto-columns: none
先来看一下默认的效果。不指定隐式网格的行高,浏览器会根据单元格内容的大小(之前设置的 item:line-height:100px),自行决定新增网格的列宽和行高。所以多出的网格元素为 100px 高。
- grid-auto-rows: 36px
指定隐式网格的行高为36px。
- grid-auto-columns: 36px
指定隐式网格的列宽为36px,并指定10号项目第2行第4列,因为多出一列,所以空白的第一行第四列由4号项目补齐,同时也应用了隐式网格的列宽。
3. 项目的属性
有下面九种属性可以设置在项目上,它们分别是:
属性 | 说明 |
---|---|
grid-column-start | 左边框所在的垂直网格线 |
grid-column-end | 右边框所在的垂直网格线 |
grid-column | grid-column-start 和 grid-column-end 的简写形式 |
grid-row-start | 上边框所在的水平网格线 |
grid-row-end | 下边框所在的水平网格线 |
grid-row | grid-row-start 和 grid-row-end 的简写形式 |
justify-self | 设置单独的单元格内容的水平位置同 justify-items |
align-self | 设置单独的单元格内容的垂直位置同 align-items |
place-self | justify-self 和 align-self 的简写形式 |
3.1 grid-column-start / grid-column-end / grid-row-start / grid-row-end
custom-ident:网格线的名字。
使用这四个属性,如果产生了项目的重叠,则使用 z-index 属性指定项目的重叠顺序。
.container {
grid-column-start: <integer> | <custom-ident> | span <integer>
}
- grid-column-start: 2; grid-column-end: 4
1号项目的左边框是第二根垂直网格线,右边框是第四根垂直网格线。只指定了1号项目的左右边框,没有指定上下边框,所以会采用默认位置,即上边框是第一根水平网格线,下边框是第二根水平网格线。
- grid-column-start: 2; grid-column-end: 4; grid-auto-flow: column dense
还是上面的例子,这次加上纵向紧密排列看看效果。
3.2 grid-column / grid-row
.container {
grid-column: <start-line> / <end-line>;
grid-row: <start-line> / <end-line>;
}
- grid-column: 1 / span 2; grid-row: 1 / span 2
3.3 justify-self / align-self / place-self
.container {
justify-self: start | end | center | stretch | [ first | last ] baseline;
align-self: start | end | center | stretch | [ first | last ] baseline;
}
- justify-self: center; align-self: center;