CSS3 网格布局 （十）

CSS3 网格布局 （十）

标签（空格分隔）： 前端学习

---

网格是由一系列水平及垂直的线构成的一种布局模式，可以帮助我们设计一些列具有固定位置以及宽度的元素的页面。

定义一个网格

要将容器定义为网格布局，要设置.app{display: grid}，此代码创建了一个只有一列的网格，即子项还是会想正常布局流一样从上向下排布，再在.app中添加grid-template-columns: num num num此时就定义的一个三列的网格。

使用fr来灵活的定义网格

使用fr灵活定义网格与普通定义不同的地方：grid-template-columns: 1fr 2fr 1fr，即定义了长度比为1:2:1的网格，另外，fr可以与有一般的长度单位混合使用，例如：grid-template-columns: 300px 1fr 2fr，那么第一列宽度就是300px，剩下两列会根据去掉300px后的可用空间按比例分配

要注意的是，fr单位分配的是可用空间而非所有空间，可用空间是不包括哪些已经被占用的空间的

网格间隙

使用grid-column-gap属性来定义列间隙，使用grid-row-gap来定义行间隙，使用grid-gap可以同时定义两者

要注意的是，间隙距离可以用任何长度单位包括百分号表示，但是不可以使用fr单位

重复构建行列

可以使用repeat来重复构建具有描写宽度配置的列，例如：

.app {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 20px;
}

上述代码重复创建了3个列

显式网格和隐式网格

显式网格是我们用grid-template-columns或grid-template-rows属性创建的，而隐式网格则是当有内容放到网格外时才会生成的。

隐式网格中生成的行/列大小默认是auto，大小会根据放入的内容自动调整，当然也可使用grid-auto-rows和grid-auto-columns属性手动设定隐式网格的大小

方便的minmax()函数
minmax函数为一个行/列的尺寸设置了取值范围。比如：minmax(100px,auto)那么尺寸至少为100像素，当内容超过100像素时会根据内容自动调整。例如：

.app {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-auto-rows: minmax(100px,auto);
    grid-gap: 20px;
}

minmax函数可以作用与隐式网格也可以作用与显式网格

基于线的元素的放置

可以根据以下分隔线来放置元素：

• grid-columns-start
• grid-columns-end
• grid-row-start
• grid-row-end
  也可使用以下缩写来同时指定开始于结束的线：
• grid-column
• grid-row
  例如：grid-row: 1 / 3; grid-columns: 1;即使放置在第一列一到三行
  注意：

article {
        background-color: blueviolet;
        grid-row: 2;
        grid-column: 2 / 3;
    }
aside {
        background-color: burlywood;
        grid-row: 2;
        grid-column: 1 / 2;
    }
<!--上述代码中article占据第二和第三列，而aside占据第一列-->

要注意的是开始与结束的线的序号要使用/符号隔开

值得注意的是在显式网格中，可以使用-1来定位到最后一条列分隔线或是行分隔线，并且可以用负数来指定倒数的某一条分隔线。

使用grid-template-areas属性放置元素

#app {
        display: grid;
        grid-template-areas: 
        "header header"
        "sidebar content"
        "footer footer";
        grid-template-columns: 1fr 3fr;
        gap: 20px;
    }
header {
    grid-area: header;
}
article {
    grid-area: content;
}
aside {
    grid-area: sidebar;
}
footer {
    grid-area: footer;
}

grid-template-areas属性的使用规则：

• 需要填满网格的每个格子
• 对于某个横跨多个格子的元素，重复写上那个元素的grid-area属性定义的区域名
• 所有名字只能出现在一个连续的区域，不能再不同的位置出现
• 一个连续的区域必须是一个矩形
• 使用.符号，让一个格子留空