13.1 创建栅格容器
栅格容器: 常规栅格 + 行内栅格
栅格元素: 栅格容器的直接子元素
与块级元素的区别:
- 浮动元素不会打乱栅格容器
- 栅格容器的外边距不与后代的外边距重叠
不能用属性:
- 栅格容器
- column相关的属性
- ::first-line/::first-letter
- 栅格元素
- float/clear
- vertical-align
注意: 浮动或绝对定位的行内栅格,将会被重置为常规栅格
13.2 基本的栅格术语
栅格容器:
- 确立栅格格式化上下文的柜体
栅格元素:
- 栅格容器中的子元素/匿名文本
栅格轨道:
- 两条相邻栅格线夹住的整个区域
- 称为栅格行/栅格列
- 尺寸由栅格线的位置确定
栅格单元:
- 由四条栅格线限定的区域,类似于单元格
栅格区域:
- 任意4条栅格线限定的区域
- 由一个或多个栅格单元构成
注意
- 栅格区域/栅格单元中不一定有栅格元素
- 栅格单元可以重叠
- 定义重叠的栅格区域
- 栅格线重叠
- 栅格单元可以重叠
- 栅格线的数量不限
- 栅格系统会自动添加栅格线和轨道
- 定义好的栅格区域无法放入指定的栅格元素时
- 显示把栅格元素放在栅格区域外
13.3 放置栅格线grid-template-rows grid-template-columns
定义栅格模板中的栅格线.
- 栅格线的名字可以使用数字或自定义名字
- 一条栅格线可以有多个名字
13.3.1 固定宽度的栅格轨道
固定宽度的栅格轨道指栅格线之间的距离不受栅格轨道中内容的变化而变化.
gird-template-columns: 200px 50% 100px;
栅格线命名:在两侧加上方括号即可
grid-template-columns: [start col-a] 200px [col-b] 50% [col-c] 100px [stop end last]
注意
- 行和列不共用命名空间,所以栅格线可以重名
- 列轨道中的百分值,相对于栅格容器的高
- 轨道有可能会推到栅格容器外
- 可使用
minmax(a,b)避免轨道被推到容器外- 最小值比最大值大,整个值都替换成最小值
13.3.2 弹性栅格轨道
- 栅格弹性轨道的尺寸基于
非弹性轨道以外的空间确定 - 或基于整个轨道中的具体内容而定
template-grid-columns: 200px 50% 100px; // => 如果栅格容器宽400px,第2列宽200px,则第3列会被挤出容器
template-grid-columns: 200px minmax(10px, 100%) 100px; // => 第2列在10px-200px范围内,但容器剩余空间只有100px,所以是10px到100px之间,第3列永远不会被挤出容器
份数单位fr:把余下的空间分成一定份数,分给各轨道
- 有点类似于
flex-grow - minmax中,最小值不能使用份数
grid-template-columns: 1fr 1fr 1fr 1fr; // => 4等份,各占25%
grid-template-columns: 15em 1f 10%; // => 1f = 栅格容器宽 - 15em - 10%
grid-template-columns: 1fr 3fr 1fr; // => 1fr = 20%
根据内容设定尺寸
max-content: 占据内容所需的最大空间- 宽度尽量大,避免换行
min-content: 占据内容所需的最小空间- 宽度尽量小,只保证最长的单词在一行显示
minmax(0, max-content) // => 轨道要保证在栅格容器范围内,如果比轨道宽,则会溢出与其他轨道重叠
auto: 避免使用
13.3.3 根据轨道中的内容适配
fit-content fit-content(argument) => min(max-content, max(min-content, argument))
- 先确定min-content和指定的参数哪个大
- 再拿大和和max-content比
- 最后拿小的
grid-template-columns: fit-content(50em) fit-content(50em) fit-content(50em); // => 第列的内容不一样,最终的宽度也不一样
13.3.4 重复栅格线
repeat(10, 5em) // 重复单条轨道
repeat(3, 2em 1fr 1fr) // 重复多条轨道
repeat(3, 2em 1fr 1fr) // 重复多条轨道外加一条轨道
repeat(3, [top] 5em [bottom top] 5em [top bottom] 5em [bottom] // 重复多条轨道及轨道线名称,轨道线名称可以相同
repeat(auto-fill, [top] 5em [bottom]) // 自动重复
repeat(3, 20em) repeat(auto-fill, 2em) // 多个重复,先分配固定重复,再按余下的空间分配自动重复
自动重复
- 会一直重复,只要不打破栅格容器
- 不能重复多个尺寸固定的轨道
- 也不能重复多个尺寸间性的轨道
- 一个轨道模板中,只能有一个自动重复的模式
auto-fill和auto-fit
- auto-fill只要空间足够,能重复多少次就重复多少次
- auto-fit没有栅格轨道将被剔除
13.3.5 栅格区域grid-template-areas
- 空白会折叠,即多个空白和一个空白的效果一样
- 每个字符串,定义一个栅格行
- 每个标识符,定义一个栅格单元
- 名称相同的单元格会合并为一个区域
- 合成的只能是矩形
- 标识符可以
.代替,
注意事项
- 定义的轨道尺寸超过栅格区域的数量,多出的轨道会放在具名区域之后
- 具名栅格区域会自动添加首尾两条线栅格线的名字
h-start横/纵列开头h-end横/比例列结尾
- 最佳实践,始终显示命名栅格区域
display: grid;
grid-template-areas:
"h h h h"
"l c c r"
"b b b b";
13.4 在栅格中附加元素
13.4.1 使用列线和行线grid-row-start
把元素边界附加到某条条栅格线上 grid-row-start/grid-row-end grid-column-start/grid-column-end
- 行的编号从上到下依次增加
- 列的编号从左到右依次增加
- 如果省略结束栅格线,结束栅格线使用序列中的下一条栅格线
span: 向确定了编号的栅格线的反方向计算,span后面的数字是指跨越几条轨道
- 不写默认为1
- 后面的数字只能是正整数
- 结束和开始栅格线都能使用
- 确定了开始,结束设为span,则向结束方向跨越
- 确定了结束,开始设为span,则向开始方向跨越
使用负数: 将从显示定义的栅格线,从后往前数
- 只有显示的栅格线才能使用负数
具名栅格线: 除了编号,还可以使用名称引用栅格线
- 如果多条栅格线同名,则还要加上编号
- span 2 col-A是指跨越2条具名栅格线,而不是2条轨道
- 通过栅区域隐匿创建的栅格线也可以引用
auto: 通常指下一条可用的列线或行线
13.4.2 行和列的简写属性 gird-row grid-column
- 以斜线分隔的2部分,前一部分定义开始栅格线,后部分定义结束栅格线
- 如果没有斜线
- 开始栅格线如果是名称,结束栅格线也是名称
- 如果开始栅格线是数字 ,结束栅格线就是auto
- 最佳实践中,命名栅格区域和栅格线最好不要同名
- 所以697/698的笔记就不做了
13.4.3 隐式栅格
就是栅格元素超出了显示定义的轨道之外,自动创建的栅格.
最佳实践证明,最好是别用隐式栅格,所以暂时不做笔记了.
13.4.4 错误处理
- 如果不小心把开始线放在结束线后面
- 对调2个值 grid-row: 5/2; => gird-row: 2/5;
- 如果开始线和结束线都声明为跨度
- 结束线将被替换为auto grid-row: span / span 3; => grid-row: span / auto;
- 只用具名跨度指明栅格元素
- 自动添加默认值1; grid-row: span footer / auto; => grid-row: span footer 1 / auto;
13.4.5 使用区域grid-area
把元素指定给定义好的栅格区域
或使用grid-area引用栅格线
- 栅格线的顺序,是从上左下右的逆时针
- 如果没有结束线,即只有1/2/3条线的时候
- 如果起始线是栅格线名称,则结束线也是相同的名称
- 如果起始线是数字,则结束线也是数字
- 如果栅格线的名称和栅格区域一致,将自动变成-start/-end的形式
13.4.6 栅格元素重叠
与定位一样,栅格元素是完全可能重叠的
13.5 栅格流grid-auto-flow
如果不明确指定栅格元素在栅格区域中的位置,栅格元素将会被自动放入栅格单元中.
- 可设置行优先或列优选
- 还可以密集流增强
行流的工作方式是,在每一行中从左向右排,如果有足够的空间放下一个栅格元素,就把栅格元素放在那,如果空间不够,就跳下一行继续,有点类似于拼图
设置为密集流时,浏览器会沿流动方向从起点开始扫描整个栅格,找到能放下栅格元素的位置就把元素放在那儿
13.6 自动增加栅格线grid-auto-rows,grid-auto-columns
如果栅格元素超出了栅格区域的范围,就会自动增加栅格轨道.默认情况下,栅格轨道的尺寸是所需的最小尺寸.通过这个属性可以控制李善增轨道的尺寸
13.7 grid简写属性
各个子属性都还没完全搞明白.这个就先不管了.以后再回来研究.
13.8 释放栅格空间
13.8.1 栏距row-gap column-gap grid-gap
两个栅格轨道之间的间隔
- 能在栅格单元之间添加间隔
- 一个轴上只能设定一个间隔值
- 只能是长度值,百分数份数无效
- gap是简写形式 = row-gap + column-gap
13.8.2 栅格元素与盒模型
- 栅格元素在外边距的边界处附加到栅格中
- 栅格元素的高宽正好等于栅格区域的高宽
- 如果栅格元素的高/宽过约束了
- 则margin-right/margin-bottom等会被重置,类似于块级元素过约束
- 计算栅格轨道的尺寸时,将忽略栅格外边距
过约束
上面的内容无法复现,没有什么过约束的效果啊...
margin居中
绝对定位的栅格元素: 暂时不做笔记,P724
13.9 栅格的对齐方式
13.9.1 纵向对齐和横向对齐单个元素
justify-self: 行内轴(横向)上对齐
align-self: 块级轴(纵向)上对照
-
每个元素在自己的栅格区域中对齐
-
只要没有显示定义width/height元素内容将自动收缩
- 块级元素也会收缩
-
start/end 栅格区域的起边,终边
-
center 中间
-
left/right
- 横向对齐时相当于start/end
- 纵向对齐时都在起边
-
self-start/self-end
- 根据书写方向的起边和终边
-
stretch 在指定方向上拉伸元素
- 设置了width/height后将失效
13.9.2 纵向对齐和横向对齐整个轨道上的所有元素
align-items: 纵向上对齐的所有栅格元素
justify-items: 横向上对齐的所有栅格元素
align-content: 当栅格轨道上有多余空间时的分配方式 纵向上
justify-content: 同上,横向上
13.10 分层和对齐
分层: z-index
- 类似于绝对定位中的层级,当栅格元素重叠时,可使用他来区分
排序: order
- 类似于流式布局中的order,区别在于会影响元素的绘制顺序
- 最佳实践中说,最好别用order
