Grid布局二

四、CSS函数

repeat()

fit-content()

minmax()

1、repeat()

重复

跟踪列表的重复片段，允许大量显示重复模式的列或行以更紧凑的形式编写。

.container {

  grid-template-columns: repeat(repeat, values);

  grid-template-rows: repeat(repeat, values);

}

可用范围：这个函数可以用在 CSS Grid 属性 grid-template-columns 和 grid-template-rows。

重复次数

number：整数，确定确切的重复次数。

auto-fill：以网格项为准自动填充。

auto-fit：以网格容器为准自动填充。

值

length：非负长度。

percentage：相对于列轨道中网格容器的内联大小的非负百分比，以及行轨道中网格容器的块长度。

flex：单位为 fr 的非负维度，指定轨道弹性布局的系数值。

max-content：表示网格的轨道长度自适应内容最大的那个单元格。

min-content：表示网格的轨道长度自适应内容最小的那个单元格。

auto：作为最大值时，等价于 max-content。作为最小值时，它表示轨道中单元格最小长宽（由min-width/min-height）的最大值。

2、fit-content()

内容适配

根据公式min（最大大小、最大值（最小大小、参数））将给定大小夹紧为可用大小。

.container {

  grid-template-columns: fit-content([ <length> | <percentage> ]);

  grid-template-rows: fit-content([ <length> | <percentage> ]);

}

值

length：一个绝对的长度。

percentage：相对于给定轴上可用空间的百分比。

3、minmax()

长宽范围

定义了一个长宽范围的闭区间。

minmax([ <length> | <percentage> | <flex> | min-content | max-content | auto ],

[ <length> | <percentage> | <flex> | min-content | max-content | auto ]);

值（跟repeat的取值是一样的）

length：非负长度。

percentage：相对于列轨道中网格容器的内联大小的非负百分比，以及行轨道中网格容器的块长度。

flex：单位为 fr 的非负维度，指定轨道弹性布局的系数值。

max-content：表示网格的轨道长度自适应内容最大的那个单元格。

min-content：表示网格的轨道长度自适应内容最小的那个单元格。

auto：作为最大值时，等价于 max-content。作为最小值时，它表示轨道中单元格最小长宽（由min-width/min-height）的最大值。

例如：

.container {

  grid-template-columns: minmax(300px, 50px);

}

minmax()这个函数前面‘300px’是最小值，后面‘50px’是最大值，也就是说范围是从小到大的。当最小值大于最大值时，最大值将被忽略，整列会成为最小值。

五、网格项上的属性

start / end ：规定每一个网格项在那个区域当中

grid-area：跟网格区域一样

self：自身里面的对齐方式

start / end 和 grid-area 两个属性都是规划出一个网格区域，把网格项放在一个网格区域里面，唯一不同的是 start / end 是通过网格线来规划出网格区域，而 grid-area 是通过网格区域在并列网格容器当中时就定义好的网格区域，然后直接来读取这个网格区域就可以了。

1、start / end 属性

grid-column-start / grid-column-end / grid-row-start / grid-row-end

使用特定网格线来确定 网格项(grid item)在网格内的位置。

.item {

  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

}

属性值

line ：可以是一个数字来指代相应编号的网格线，也可使用名称指代相应命名的网格线

span number ：网格项将跨越指定数量的网格轨道

span name ：网格项将跨越一些轨道，直到碰到指定命名的网格线

auto：自动布局，或者自动跨度，或者跨越一个默认的轨道

说明

如果没有声明 grid-column-end / grid-row-end，默认情况下，该网格项将跨越1个轨道。

网格项可以相互重叠。可以使用 z-index 来控制它们的堆叠顺序。

grid-column / grid-row

grid-column-start + grid-column-end 和 grid-row-start + grid-row-end 的简写形式。

.item {

  grid-column: <start-line> / <end-line> | <start-line> / span <value>;

  grid-row: <start-line> / <end-line> | <start-line> / span <value>;

}

个人建议：斜杠前后的空格千万不要省略，有时可以识别，有时不可识别，对于浏览器来说小版本的话就会有差别。建议斜杠前后都要有空格。

属性值

start-line / end-line：每个值的用法都和属性分开写时的用法一样

例如：

CSS代码如下：

.container > .item:nth-child(1) {

    grid-column-start: 2;

    grid-column-end: 4;

    grid-row-start: 2;

    grid-row-end: 4;

}

等同于

.container > .item:nth-child(1) {

    grid-column: 2 / 4;

    grid-row: 2 / 4;

}

等同于

.container > .item:nth-child(1) {

    grid-column: 2 / span 2;

    grid-row: 2 / span 2;

}

2、grid-area 属性

网格区域

给 gird item 进行命名以便于使用 grid-template-areas 属性创建模板时来进行引用。

.item {

  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;

}

属性值

name ：grid-template-areas 中定义的命名

row-start / column-start / row-end / column-end：可以是数字，也可以是网格线的名字

例如：

CSS代码如下：

.container > .item-a {

    grid-area: row1-start / 2 / 3 / five;

}

等同于

.container > .item-a {

    grid-column-start: 2;

    grid-column-end: five;

    grid-row-start: row1-start;

    grid-row-end: 3;

}

 

例如：

CSS代码如下：

.container > .item-a {

    grid-column: 2 / span 2;

    grid-row: 2 / span 2;

}

等同于

.container > .item-a {

    grid-area: 2 / 2 / 4 / 4;

}

3、self 属性

justify-self

沿着行轴对齐 grid-item 里的内容。

.item {

  justify-self: start | end | center | stretch;

}

属性值

start：将内容对齐到网格区域的左端

end：将内容对齐到网格区域的右端

center：将内容对齐到网格区域的中间

stretch：填充网格区域的宽度（这是默认值）

align-self

沿着列轴对齐 grid-item 里的内容。

.item {

  align-self: start | end | center | stretch;

}

属性值

start：将内容对齐到网格区域的顶部

end：将内容对齐到网格区域的底部

center：将内容对齐到网格区域的中间

stretch：填充网格区域的高度（这是默认值）