1.Grid 布局定义
CSS 的网格布局模块提供了一个基于网格的布局系统, 能够以行和列来进行布局, 使其更容易设计网页, 而不必使用浮标和定位.
2. 网格布局创建
display 属性被设置为网格或内联网格.
块级元素设置 display:grid
内联元素设置 display:inline-grid
- // grid-container 称为 grid 容器
- <div class="grid-container">
- // grid-item 称为 grid 子项
- <div class="grid-item">1</div>
- <div class="grid-item">2</div>
- <div class="grid-item">3</div>
- <div class="grid-item">4</div>
- <div class="grid-item">5</div>
- <div class="grid-item">6</div>
- </div>
- <style>
- .grid-container {
- display: grid;
- grid-template-columns: auto auto auto;
- background-color: #2196F3;
- padding: 10px;
- }
- .grid-item {
- background-color: rgba(255, 255, 255, 0.8);
- border: 1px solid rgba(0, 0, 0, 0.8);
- padding: 20px;
- font-size: 30px;
- text-align: center;
- }
- </style>
image
3. 网格容器
为了使一个 html 元素表现为一个网格容器, 你必须设置显示属性为网格或内嵌网格.
网格容器组成的网格项目, 置于行和列内.
3-1.grid-template-columns 属性定义的列数在网格布局, 它可以定义每个列的宽度.
该值是一个空格分隔列表, 其中每个值定义的相应列的长度.
CSS 数据类型, 表示网格容器内的灵活长度(如 1fr,1.5fr)
- .grid-container {
- display: grid;
- // 网格布局有 4 列, 所占宽度分别为 50px 40px 30px 20px
- grid-template-columns: 50px 40px 30px 20px;
- // 网格布局有 5 列, 所占宽度分别如下
- grid-template-columns: 50px 40px 30px 20px 10px;
- // 容器分成 3 列, 一列宽度为 50px, 然后将容器剩下的部分成 2 个部分, 第二列和第三列各占 1 个部分
- grid-template-columns: 50px 1fr 1fr;
- }
3-2.grid-template-rows 属性定义每一行的高度.
- .grid-container {
- display: grid;
- // 网格布局有 2 行, 所占高度分别如下 80px 200px
- grid-template-rows: 80px 200px;
- // 容器分成 3 行, 一行高度为 50px, 然后将容器剩下的高度分为 2 个部分, 第二行和第三行高度各占 1 个部分
- grid-template-rows: 50px 1fr 1fr;
- }
3-3.justify-content 属性用于横向对准容器内整个网格
可能取值
stretch: 默认值. 拉伸, 宽度填满 grid 容器, 拉伸效果需要网格目标尺寸设为 auto 时候才有效, 如果定死了宽度, 则无法拉伸.
space-evenly:evenly 是匀称, 平等的意思. 也就是视觉上, 每个 flex 子项两侧空白间距完全相等.
space-around:around 是环绕的意思, 意思是每个 flex 子项两侧都环绕互不干扰的等宽的空白间距, 最终视觉上边缘两侧的空白只有中间空白宽度一半.
space-between: 表现为两端对齐. between 是中间的意思, 意思是多余的空白间距只在元素中间区域分配.
center: 表现为居中对齐.
start: 默认值. 逻辑 CSS 属性值, 与文档流方向相关. 默认表现为左对齐.
end: 逻辑 CSS 属性值, 与文档流方向相关. 默认表现为右对齐.
- .grid-container {
- display: grid;
- justify-content: end;
- }
space-evenly | space-around | space-between | center | start | end |
---|---|---|---|---|---|
[图片上传失败...(image-72968-1560781111484)] | [图片上传失败...(image-f27798-1560781111484)] | [图片上传失败...(image-d00e7c-1560781111484)] | [图片上传失败...(image-36e0d8-1560781111484)] | [图片上传失败...(image-45f51-1560781111484)] | [图片上传失败...(image-f1c9fd-1560781111484)] |
3-4.align-content 属性用于竖直地对准在容器内部的整个网格
可能取值 stretch,space-evenly,space-around,space-between,center,start,end (同 justify-content 取值)
- .grid-container {
- display: grid;
- height: 400px;
- align-content: center;
- }
3-5.place-content 可以让 align-content 和 justify-content 属性缩写在一个 CSS 声明中
- .container {
- // 由于兼容性问题, 不建议合在一起
- place-items: <align-content> / <justify-content>;
- }
4. 网格间隙
每列 / 行之间的间隙被称为间隙
- .grid-container {
- display: grid; // 网格布局
- grid-column-gap: 50px; // 列间距 50px
- grid-row-gap: 10px; // 行间距 10px
- grid-gap: 10px 50px ; // 分别设置行间距 10px, 列间距 50px
- }
image
5. 网格线
列之间的线被称为列线.
行之间的线被称为行线.
image
5-1. 放置在列线 1 的网格项目, 并让它结束对列线 3
可能取值:
- grid-column-start: <number> | <name> | span <number> | span <name> | auto
- <number>: 起止与第几条网格线.
- <name>: 自定义的网格线的名称.
span <number>: 当前网格会自动跨越指定的网格数量.
span <name>: 当前网格会自动扩展, 直到命中指定的网格线名称.
auto: 全自动, 包括定位, 跨度等.
- .item1 {
- grid-column-start: 1;
- grid-column-end: 3;
- }
image
5-2. 同理放在在排线(行线)1 的网格项目, 并让它结束对排线 3
- .item1 {
- grid-row-start: 1;
- grid-row-end: 3;
- }
5-3.grid-column(grid-column-start + grid-column-end)属性定义在其上的列 (多个) 放置的一个项目
可能取值:
grid-column: <start-line> / <end-line> | <start-line> / span <value>;
eg: 让 item1 开始在 1 号线和 3 号线结束:
- .item1 {
- grid-column: 1 / 3;
- }
image
eg: 让 item1 开始在 1 号线开始和跨度 3 列结束:
- .item1 {
- grid-column: 1 / span 3;
- }
image
eg: 让 item1 开始在 2 号线开始和跨度 2 列结束:
- .item1 {
- grid-column: 2 / span 2;
- }
image
5-4.grid-row(grid-row-start + grid-row-end)属性定义哪一行放置一个项目
可能取值及原理同 grid-column
6.grid-area 属性可以被用作速记属性为 网格行启动, 格列启动, 网格行端和网格列端的特性
eg: 使 "item1" 上行线 1 和列线 2 开始, 上行线 4 和列线 6 结束
- .item1 {
- grid-area: 1 / 2 / 4 / 3;
- }
image
eg: 使 "item1" 对行线 1 和列 2 号线和跨度 2 行跨度 3 列结束
- .item1 {
- grid-area: 1 / 2 / span 2 / span 3;
- }
image
7. 命名网格项目
grid-area 属性也可用于分配的名称并网项目
- .item1 {
- // item1 将被命名为 "myArea"
- grid-area: myArea;
- }
- .grid-container {
- //item1 跨越的 3 列网格布局所有 3 列:
- grid-template-areas: 'myArea myArea myArea';
- }
image
- .item1 {
- // item1 将被命名为 "myArea"
- grid-area: myArea;
- }
- .grid-container {
- //item1 跨越的 5 列网格布局中的 3 列
- grid-template-areas: 'myArea myArea myArea . .';
- }
image
- .item1 {
- grid-area: myArea;
- }
- .grid-container {
- // 让 item1 跨越两列和两行:
- grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
- }
[图片上传失败...(image-786e21-1560781111484)]
8. 隐式网格
使用 grid-auto-rows, grid-auto-columns, grid-auto-flow 来设置隐式网格
grid-auto-rows: 隐含创建的网格行的大小
grid-auto-columns: 隐含创建的网格列的大小轨道
grid-auto-flow: 隐含创建的网格的默认流方向
- .grid-container {
- display: grid;
- background-color: #2196F3;
- padding: 10px;
- grid-gap:5px;
- // 行高度 70px
- grid-template-rows: 70px;
- // 2 列铺满各站 1 半
- grid-template-columns: repeat(2, 1fr);
- // 隐含创建的网格行的大小 140px
- grid-auto-rows: 140px;
- // 隐含创建的网格的默认流方向: 行方向
- grid-auto-flow: row;
- }
image
9.Grid 属性集
作用在 grid 容器上 | 作用在 grid 子项上 |
---|---|
grid-template-columns(列宽) | grid-column-start |
grid-template-rows(行高) | grid-column-end |
grid-template-areas(命名网格) | grid-row-start |
grid-template | 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 |
place-items (水平垂直呈现方式) | place-self |
justify-content(水平分布方式) | |
align-content(垂直方向的分布方式) | |
place-content | |
grid-auto-columns(隐式创建列大小) | |
grid-auto-rows | |
grid-auto-flow | |
grid(网格布局) |
10.Grid 与 Flex 主要区别
Grid 布局则适用于更大规模的布局(二维布局),
处理一些不规则和非对称的设计.
Flexbox 布局最适合应用程序的组件和小规模布局(一维布局)
2D 布局适合使用 CSS grids(行与列)
Flexbox 适用于单一维度的布局(行或列)
虽然 grid 存在一定的兼容, 但是依照 flex 的趋势, grid 的时代必然会来
参考文章
- https://www.w3schools.com/css/css_grid.asp
- https://learncssgrid.com/
来源: http://www.jianshu.com/p/f8f01bad73f8