grid 布局的使用
grid 布局的使用
css 网格布局,是一种二维布局系统。
浏览器支持情况:老旧浏览器不支持,
概念: 网格容器。元素应用dispalay:grid,它是所有网格项的父元素。
<div class="container">
<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
</div>
网格项。网格容器的子元素。
<div class="container">
<div class="item "></div>
<div class="item "></div>
<div class="item"></div>
</div>
网格线。组成网格线的分界线,他们可以是列网格线,也可以是行网格线
网格轨道。两个相邻的网格线之间为网格轨道,可以认为是网格的行列或者行。
网格单元。两个相邻的列网格线和两个相邻的网格线组成的网格单元,它是最小的网格单元。
网格区。网格区是由任意数量网格单元组成。
设置在网格容器上的属性
注:当元素设置了网格布局,column、float、clear、vertical-align属性无效
1. display: grid | inline-grid | subgrid;
属性值: grid: 生成块级网络
inline-grid: 生成行内网格
subgrid: 如果容器本身是网格项,用来继承父容器的行列大小。
2.grid-template-columns: <track-size> ... | <line-name> <track-size> ... ;
grid-template-rows: <track-size> ... | <line-name> <track-size>
设置行和列的大小。
属性值: track-size: 轨道大小,可以使用css长度,百分比或用分数。
line-name:网格线名字,可以选择任意名字。
当设置行或者列大小为auto 时,网格会自动分配空间和网格名称。
.container{
display:grid;
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
}
可以给网格线定义名字.
.container{
display:grid; 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];
}
用fr单位可以将容器分为几等份,例如下面分成三等份
.container{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
}
3.grid-template-areas
通过获取网格项中的grid-area属性值(名称),来定义网格模版。
重复网格区(grid-area)名称将跨越网格单元格,‘.’代表空网格单元。
属性值: grid-area-name: 网格项的grid-area属性值(名字)‘.’ : 空网格单元 none: 不定义网格区域
.item-a{ grid-area: header; }
.item-b{ grid-area: main; }
.item-c{ grid-area: sidebar; }
.item-d{ grid-area: footer; }
.container{
display:grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas: "header header header header" "main main . sidebar" "footer footer footer footer" }
4. grid-column-gap:<line-size>; 和 grid-row-gap: <line-size> ;
网格单元间距
属性值:line-size: 网格线间距,设置单位值
.container{
display:grid;
grid-template-columns: 100px 50px 100px;
grid-template-rows: 80px auto 80px;
grid-column-gap: 10px; grid-row-gap: 15px;
}
5. grid-gap:<grid-column-gap> <grid-row-gap>;
是grid-column-gap 和 grid-row-gap简写。
.container{
display:grid;
grid-template-columns: 100px 50px 100px;
grid-template-rows: 80px auto 80px;
grid-gap: 10px 15px;
}
6. justify-items: start | end | center | stretch(默认) ;
垂直于列网格线对齐,适用于网格容器里的所有网格项。
属性值:
start: 左对齐。
end: 右对齐。
center: 居中对齐。
stretch: 填满(默认)。
.container{
display:grid;
justify-items: start;
}
7. align-items: start | end | center | stretch ;
垂直于行网格线对齐,适用于网格容器里的所有网格项。
属性值:
start: 顶部对齐。
end: 底部对齐。
center: 居中对齐。
stretch:填满(默认)。
8. justify-content: start | end | center | stretch | space-around |
space-between | space-evenly ;
如果用像px非弹性单位定义的话,总网格区域大小有可能小于网格容
器,这时候你可以设置网格的对齐方式(垂直于列网格线对齐)。
属性值: start: 左对齐。 end: 右对齐。 center: 居中对齐。
stretch: 填满网格容器。 space-around: 网格项两边间距相等,网格项之间间隔是单侧的2倍。
space-between: 两边对齐,网格项之间间隔相等。 space-evenly: 网格项间隔相等。
.container{ display:grid; justify-content: start; }
9. align-content: start | end | center | stretch | space-around |
space-between | space-evenly ;
如果用像px非弹性单位定义的话,总网格区域大小有可能小于网格
容器,这时候你可以设置网格的对齐方式(垂直于行网格线对齐)。
属性值: start: 顶部对齐。 end: 底部对齐。 center: 居中对齐。
stretch: 填满网格容器。 space-around: 网格项两边间距相等,网格项之间间隔是单侧的2倍。
space-between: 两边对齐,网格项之间间隔相等。 space-evenly: 网格项间隔相等。
.container{ display:grid; align-content: start; }
10. grid-auto-columns: <track-size> ... ; 和 grid-auto-rows: <track-size> ... ;
自动生成隐式网格轨道(列和行),当你定位网格项超出网格容器
范围时,将自动创建隐式网格轨道.
属性值:track-size: 网格轨道大小,可以是固定值,百分比或者是
分数(fr单位)。
.container{
display:grid;
grid-template-columns: 60px 60px;
grid-template-rows: 90px 90px
}
11. grid-auto-flow : row(默认) | column | dense ;
在没有设置网格项的位置时,这个属性控制网格项怎样排列
属性值:
row: 按照行依次从左到右排列。
column: 按照列依次从上倒下排列。
dense: 按先后顺序排列。
设置在网格项上的属性
1. 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 ;
通过网格线来定义网格项的位置。grid-column-start、grid-row-start定义网格项的
开始位置,grid-column-end、grid-row-end定义网格项的结束位置。
属性值: line: 指定带编号或者名字的网格线。 span <number>: 跨越轨道的数量。
span <name>: 跨越轨道直到对应名字的网格线。 auto: 自动展示位置,默认跨度为1。
.item-a{
grid-column-start: 2;
grid-column-end: five;
grid-row-start: row1-start grid-row-end: 3
}
2. grid-column: <start-line> / <end-line> | <start-line> / span <value> ;
grid-row: <start-line> / <end-line> | <start-line> / span <value> ;
是 grid-column-start、grid-column-end 和 grid-row-start、grid-row-end 的简写。
.item-c{ grid-column: 3 / span 2; grid-row: third-line / 4; }
3. grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end> ;
定义网格项名字,以便创建模块(容器属性grid-template-areas来定义模块)。
属性值: name: 项目名子。 <row-start> / <column-start> / <row-end> / <column-end>:
可以是数字或网格线名字。
例子: 定义网格项名字:
.item-d{ grid-area: header }
通过网格线定位网格项:
.item-d{
grid-area: 1 / col4-start / last-line / 6 ;
}
4. justify-self: justify-self: start | end | center | stretch;
定义单个网格项垂直于列网格线的对齐方式。
属性值: start: 网格区域左对齐。 end: 网格区域右对齐。
center: 网格区域居中。 stretch: 网格区域填满。
5. align-self: start | end | center | stretch;
定义单个网格项垂直于行网格线的对齐方式。
属性值:
start: 网格区域顶部对齐。
end: 网格区域底部对齐。
center: 网格区域居中。
stretch: 网格区域填满。
- Golang中用interface{}接收任何参数与强转
- Machine Box创始人教你快速建立一个ML图像分类器
- 【图解】Web前端实现类似Excel的电子表格
- 一个简单而强大的深度学习库—PyTorch
- CSS实现水平|垂直居中漫谈
- 深度学习开源框架PaddlePaddle发布新版API,简化深度学习编程
- HTML5游戏引擎深度测评
- 使用NumPy介绍期望值,方差和协方差
- Cleaver快速制作网页PPT
- 【学术】马尔可夫链的详细介绍及其工作原理
- 想把自拍背景改成马尔代夫?手把手教你用深度学习分分钟做到
- 还记得谷歌之前发现的两颗行星吗?今天谷歌对此披露了重要技术细节
- Golang调用动态库so
- 30多条mysql数据库优化方法,千万级数据库记录查询轻松解决
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- TypeScript - 泛型
- TypeScript - 类型声明、枚举、函数、接口
- Vue - 简单实现一个命令式弹窗组件
- Vue - 组件通信之$attrs、$listeners
- 多线程系列(一)多线程基础
- Python自动化运维之iptables和安全概述
- Python自动化运维之shell终极指南
- SQL 中判断条件的先后顺序,会引起索引失效么?
- Maven工程java -jar时提示xxx-SNAPSHOT.jar中没有主清单属性
- Kotlin 1.4 版本正式发布:新功能一覽
- 聊聊java中的哪些Map:(二)HashMap中的TreeNode
- 用innodb_ruby分析InnoDB的页管理
- react获取运行环境是开发还是生产环境。
- 函数节流与函数防抖
- antd3.x中的form