HTML grid布局学习笔记

设置grid布局

{
    display: grid;
}

grid-template-columns 属性用法

功能

设置当前行内的属性如:本行显示多少个格子格子宽度多少

在后面添加一个 150px 就是本行显示1列宽度150px 添加两个就是本行显示2列宽度150px 以此类推

{
    display: grid;
    grid-template-columns: 150px 150px 150px 150px;
}

除了使用固定单位还可以使用fr来作为单位

fr是grid布局的专用单位代表了容易可用空间的一部分

使用示例

{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

这样设置布局中一行有4个容器尺寸跟随页面大小变化不仅仅可使用1fr 使用2fr 即可获得两份可用空间
也可以搭配其他单位与1fr使用
如:

{
    display: grid;
    grid-template-columns: 1rem 150px 1fr 1fr;
}

在做相应式布局时我们通常会限制一个最小宽度
我们可以使用

minmax() 需填写两个属性值如: minmax(150px,1fr) 会随空间变化但不会窄于150px

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

这个方法不错但是有多个需要这样做时过于繁琐我们可以简化操作使用 repeat()
需填写两个参数

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

第一个代表重复多少次第二个代表要重复的数值

grid-template-rows

设置完行之后我们设置列方法一样
只需使用grid-template-rows 即可

{
    display: grid;
    grid-template-rows: repeat(3,1fr);
}

gap

gap在grid 和 flex都可以使用
用于设置行与列之间的间距
用法:

{
display: grid;
gap: 10px;
}

后面只带一个参数则用此数值同时设置行与列的间距
带两个参数分别设置行与列的间距

布局核心

grid布局主要是把空间分为多个行/列

查看视频讲解

当我们想要让某个控件占据跟多位置时我们可以这样做

{
    /*开始的行线*/
    grid-row-start: 1;
    /*结束的行线*/
    grid-row-end: 3;
    /*开始的线*/
    grid-column-start: 1;
    /*结束的列线*/
    grid-column-end: 3;
}

但是这样写较为麻烦我们可以使用简写

{
    grid-row: 1 / 3;
    grid-column: 4 / 5;
}

注意使用 / 分割

在没有明确的行线时我们可以使用span来写

{
    grid-row: span 2;
    grid-column: span 2;
}

span描述的时占据多少个位置不是在那个具体的位置

当我们想设置让控件直接占据到最后一个格子时我们可以

/*设置到最后一个格子*/
{
    grid-row: span -1;
    grid-column: span -1;
}
/*设置到倒数第二个格子*/
{
    grid-row: span -2;
    grid-column: span -2;
}

在平时我们需要把两个控件设置重叠在一起我们需要使用 position 这会史控件脱离文档流
在grid布局中我们可以通过指定相同的网格区域虽然想起来重叠了但是空间还在grid布局中方便管理
直接通过设置行线列线即可

{
    grid-row: 1 / 3;
    grid-column: 4 / 5;
}

‍