新增属性值

弹性长度 fr

可以使用单位 fr 自动按照比例计算宽高。

比如设置

grid-template-columns: 1fr 1fr 2fr

在这个示例中,将网格容器分成了4等份(1 + 1 + 2 = 4),每一份(1fr)是网格容器宽度的四分之一。所以 item1 和 item2 的宽度是网格容器的四分之一宽,item3 是网格容器宽度的四分之二(2fr)

当fr和其它长度单位的值结合在一起的时候,fr 是基于网格容器可用空间来计算。

grid-template-columns: 3rem 25% 1fr 2fr

在这个示例中,将网格容器可用空间是网格宽度减去 3rem 和 25% 剩下的宽度,而 fr 就是基于这个尺寸计算:

1fr = (网格宽度 - 3rem - 网格宽度 * 25%) / 3

minmax

minmax() 函数能够让我们用最简单的 CSS 控制网格轨道的大小。这个函数包括一个最小值和最大值。

如果定义的最大值小于最小值,它将会被忽略,函数会被视为只设置了一个最小值。

minmax()函数接受六种类型的值:

- 长度值 `<length>`
- 百分比值
- 弹性值
- max-content
- min-content
- auto

示例代码

.grid {
  display: grid;
  grid-template-columns: minmax(100px, 200px) 1fr 1fr;
}

repeat

使用repeat()可以创建重复的网格轨道。这个适用于创建相等尺寸的网格项目和多个网格项目。repeat()接受两个参数:第一个参数定义网格轨道应该重复的次数,第二个参数定义每个轨道的尺寸。

比如:

grid-template-columns: 30px repeat(3, 1fr) 30px;

在这个示例中,第一列和最后一列的宽度都是 30px,并且它们之间有另列三列,这三列是通过 repeat() 来创建的,而且每列的列宽是 1fr(1fr = (网格宽度 - 30px - 30px) / 3)

甚至,在 repeat() 中,也可嵌套 minmax(),控制每一个网格项目的最大最小值。

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
}

这个例子中,每一行分为三列,每一列最小宽度为 200px,最大时平分网格宽度。

auto-fit

在 repeat() 函数中使用 auto-fit 这个关键词,来替代重复次数。这可以根据每列的宽度灵活的改变网格的列数,灵活的控制网格的列数。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

这个例子中,网格中的每个列的最小宽度为200px。根据浏览器视窗大小,网格数量会根据共最合理的宽度进行变化。做到了不使用媒体查询即可实现响应式布局。

max-content 和 min-content

max-content关键词是一个特殊的值,它代表了单元格“最理想的大小”。网格单元格最小的宽度围绕它的内容。例如,如果单元格的的内容是一个句子,理想的单元格的宽度将是整个句子的长度,无论是什么长度,单元格内容的句子都不会换行。

.grid {
  display: grid;
  grid-template-columns: minmax(max-content, max-content) 1fr 1fr;
}

min-content 代表单元格最小宽度,可以不让内容溢出单元格,除非是不可避免的。

.grid {
  display: grid;
  grid-template-columns: minmax(min-content, min-content) 1fr 1fr;
}

auto

auto,minmax() 函数的最小值和最大值使用 auto,将会有不同的含义,其含义也取决于 minmax() 函数的最小值和最大值。

如果用于最大值,那么 auto 值相当于 max-content 值;如果用于最小值,那么 auto 值相当于 min-content。最大的最小尺寸不同于 min-content,它通过 min-width 或 min-height 来指定。

.grid {
  display: grid;
  grid-template-columns: minmax(auto, auto) 1fr 1fr;
}

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress