lucky 的学习笔记(CSS 网格)

lucky 的学习笔记(CSS 网格)
0

1、 通过将属性 display 的值设为 grid ,使 HTML 元素变为网格容器。

2、 在一个网格容器中使用 grid-template-columns 属性可以添加一些列,示例如下:

.container {
display: grid;
grid-template-columns: 50px 50px;
}

上面的代码可以在网格容器中添加两列,宽度均为 50px。

grid-template-columns 属性值的个数表示网格的列数,而每个值表示对应列的宽度。

这里有一个添加 100 行网格的例子,使每行高度均为 50px:

grid-template-rows: repeat(100, 50px);

你还可以用 repeat 方法重复多个值,并在定义网格结构时与其他值一起使用。举个例子:

grid-template-columns: repeat(2, 1fr 50px) 20px;

效果相当于:

grid-template-columns: 1fr 50px 1fr 50px 20px;

注意:
1fr 50px 重复了两次,后面跟着 20px。

3、 用 grid-template-rows 为网格设置行数,同上。

4、 在 CSS 网格中,可以使用绝对定位和相对定位单位如 pxem 来确定行或列的大小。

fr :设置列或行占剩余空间的一个比例,

auto :设置列宽或行高自动等于它的内容的宽度或高度,

% :将列或行调整为它的容器宽度或高度的百分比,

最右侧的预览区中的效果通过下面的代码实现:

grid-template-columns: auto 50px 10% 2fr 1fr;

这段代添加了五个列。第一列的宽与它的内容宽度相等;第二列宽 50px;第三列宽是它容器的 10%;最后两列,将剩余的宽度平均分成三份,第四列占两份,第五列占一份。

5、 grid-gapgrid-row-gapgrid-column-gap 的简写,它更方便使用。如果 grid-gap 有一个值,行与行之间和列与列之间将添加等于该值的间隙。但是,如果有两个值,第一个值将作为行间隙的高度值,第二个值是列间隙的宽度值。

.container {
    grid-gap: 10px 20px;
 }

6、 你可以用 grid-column 属性定义网格项开始和结束的位置,进而控制每个网格项占用的列数。

示例如下:

grid-column: 1 / 3;

这会让网格项从左侧第一条线开始到第三条线结束,占用两列。

你可以用 grid-row 属性来确定开始和结束的水平线。

grid-area: 起始水平线 / 起始垂直线 / 末尾水平线 / 终止垂直线 ;

item1 { grid-area: 1/1/2/4; }

7、 你可以使用网格项的 justify-self 属性,设置其内容的位置在单元格内沿行轴对齐的方式。默认情况下,这个属性的值是 stretch ,这将使内容占满整个单元格的宽度。该 CSS 网格属性也可以使用其他的值:

start :使内容在单元格左侧对齐

center :使内容在单元格居中对齐

end :使内容在单元格右侧对齐

align-self 属性:沿列轴对齐

可以对网格容器使用 justify-items 给网格中所有的网格项设置沿行轴对齐的方式,使用 align-items 属性可以使它们一次性沿列轴对齐。