CSS3 Grid
css布局: Table -> Float + Position –> Flex
CSS Grid(网格) 布局(又称为 “Grid(网格)” ),是一个二维
的基于网格的布局系统. 它的目标是完全改变我们基于网格的用户界面的布局方式。
CSS Grid布局是目前CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行
。
通过将 CSS 规则应用于 父元素 (成为 Grid Container 网格容器) 及 子元素(成为 Grid Items 网格项),你就可以轻松使用 Grid(网格) 布局。
浏览器支持caniuse
重要术语
- 网格容器(Grid Container)
- 网格项(Grid Item)
- 网格线(Grid Line)
- 网格轨道(Grid Track)
- 网格单元格(Grid Cell)
- 网格区域(Grid Area)
- Grid(网格) 属性目录
网格容器
Grid Container: 应用 display: grid 的元素。
这是所有网格项(Grid Items)的直接父级元素。
网格项
Grid Item: 网格容器(Grid Container)的子元素。
(例如直接子元素)
网格线
Grid Line: 构成网格结构的分界线。
它们既可以是垂直的(“列网格线(column grid lines)”)
也可以是水平的(“行网格线(row grid lines)”)
并位于行或列的任一侧
网格轨道
Grid Track: 两条相邻网格线之间的空间。
你可以把它们想象成网格的列或行
网格单元格
Grid Cell: 两个相邻的行和两个相邻的列网格线之间的空间。
这是 Grid(网格) 系统的一个“单元”。
网格区域
Grid Area: 4条网格线包围的总空间。
一个网格区域可以由任意数量的网格单元格组成。
Grid(网格) 属性目录
容器的属性 [16个]
Grid(网格) 属性目录
网格项的属性 [9个]
display
|
|
父元素 网格容器 属性 display
将元素定义为网格容器,并为其内容建立新的 网格格式上下文。
- grid :生成一个块级网格
- inline-grid :生成一个内联网格
- subgrid :嵌套网格1subgrid:你希望它的行/列的大小继承自它的父级网格容器,而不是自己指定的。
column && row
- grid-template-column(列)
- grid-template-row(行)
|
|
minmax()
函数来创建网格轨道的最小或最大尺寸
|
|
在这个示例中,第一行的高度最小值是100px,但其最大值为auto,允许行高可以变大超过100px。
repeat() 重复网格轨道
使用repeat()可以创建重复的网格轨道。
这个适用于创建相等尺寸的网格项目和多个网格项目。
|
|
|
|
grid-gap 间距
只能创建列与列或行与行之间的间距
但不能创建列和行与网格容器边缘的间距
|
|
通过网格线号码来定位网格项目
|
|
每条线是从网格轨道开始,网格的网格线从1开始,每条网格线逐步增加1
网格线号
网格线号
|
|
|
|
网格
简写: 两个值
|
|
|
|
|
|
网格
简写: 四个值
|
|
|
|
网格项目跨行或跨列
默认情况下网格项目跨度只有一个列和行,但可以跨越多个行和列
|
|
|
|
网格项目跨行或跨列
|
|
|
|
网格项目跨行或跨列
合并 span
关键词span后面紧随数字,表示合并多少个列或行。
|
|
网格线命名
- 定义网格时,网格线可以被命名。
- 网格线名称也可以设置网格项目位置。
|
|
|
|
|
|
|
|
每一个网格线的名称可以用来定位网格项目的位置。
通过网格线名称设置网格项目位置
|
|
|
|
引用网格线名称的时候不应该带方括号
|
|
|
|
使用相同的名称命名网格线和设置网格项目位置
|
|
|
|
|
|
使用相同的网格线名称可以设置网格项目的位置
|
|
网格线的名称和数字之间需要用空格分开。
|
|
通过网格区域命名和定位网格项目 (一)
|
|
|
|
|
|
|
|
|
|
|
|
通过网格区域命名和定位网格项目 (二)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
隐式网格
|
|
|
|
|
|
|
|
|
|
网格默认流方向
|
|
更改网格流方向
|
|
|
|
|
|
隐式地命名网格区域名称
|
|
|
|
|
|
网格项目定位可以通过网格区域名称来设置,而不需要使用网格线名称。
隐式命名网格线名称
|
|
|
|
|
|
在这个示例中,header通过隐式的网格线名称设置其位置。
网格项目层级
网格项目可以具有层级和堆栈,必要时可能通过z-index属性来指定
|
|
|
|
|
|
网格项目对齐方式(Box Alignment)
|
|
容器的属性
justify-items和align-items应用在网格容器上
它们的属性值有:
|
|
align-self和justify-self属性用于网格项目自身对齐方式。
它们主要接受以下属性值:
单个元素对齐方式
网格轨道对齐方式
网格轨道对齐可以相对于网格容器行和列轴。
它们支持下面属性:
|
|
参考资料
- https://www.w3cplus.com/css/learncssgrid.html
- http://www.css88.com/archives/8510
- https://caniuse.com/#feat=css-grid
- https://www.w3cplus.com/css3/how-the-minmax-function-works.html?utm_source=tuicool&utm_medium=referral
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
- https://css-tricks.com/snippets/css/complete-guide-grid/
- https://gridbyexample.com/
声明:本资料仅供学习交流,严禁使用于任何商业用途!
相关资料参考自w3cplus、css88、css-tricks等博客内容。如有侵权可联系删除或添加出处来源。
如需转载,转载请注明出处。