grid布局

grid布局是一种二维布局方式，可以将元素按行和列进行布局

grid布局的语法：

    display: grid; 启用网格布局   
    grid-template-columns: repeat(3, 100px); 定义3列，每列宽度100px
    grid-template-rows: repeat(3, 100px); 定义3行，每行高度100px
    gap: 10px; 设置网格间距为10px

grid-template-columns 取值方式

纯数值:

grid-template-columns: 100px 100px 100px;

fr 片段划分:

grid-template-columns: 1fr 1fr 1fr; fr fraction的缩写, 意为'片段'

百分比:

grid-template-columns: 50% 50%;

auto 关键字:

grid-template-columns: 100px auto 100px; 由浏览器自己决定长度

minmax():

grid-template-columns: 1fr 1fr minmax(100px, 1fr); 表示长度就在这个范围之中

repeat():

grid-template-columns: repeat(3,100px); 3列, 列宽100px

grid-template-columns: repeat(3, 33.33%); 简单重复的值

grid-template-columns: repeat(3,1fr); fr fraction的缩写, 意为'片段'

grid-template-columns: repeat(auto-fill, 100px); auto-fill 表示自动填充

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

示例

1
2
3
4
5
6

设置间距

grid布局可以设置行间距、列间距、网格间距等

row-gap 行间距

设置行间距

语法：

row-gap: 行间距

1
2
3
4
5
6

column-gap 列间距

设置列间距

语法：

column-gap: 列间距

1
2
3
4
5
6

gap 网格间距

设置网格间距

语法：

gap: <length> 网格间距（grid-gap的简写形式，同时设置行间距和列间距）

说明：gap属性是grid-gap的简写形式，功能完全相同。CSS Grid布局最初使用grid-gap，后来为了与其他布局（如Flexbox）统一，推荐使用gap属性。两者在现代浏览器中均可使用。

1
2
3
4
5
6

合并单元格

grid布局可以合并单元格，实现合并行、合并列等效果

grid-template-areas

定义网格区域

多个单元格合并成一个区域的写法: 

        grid-template-areas: 
                            'a a a' 
                            'b b b'
                            'c c c';

说明：grid-template-areas属性用于定义网格区域，每个区域用一个名称表示。区域名称可以是任意字符串，但是建议使用有意义的名称，例如"header"、"main"、"footer"等。

示例：

1
2
3
4
5
6

grid-row 属性

grid-row属性用于指定网格项跨越的行范围

        语法：grid-row: start-line / end-line;
        语法：grid-column: start-line / end-line;

示例

        grid-row: 2 / 3;  /* 表示从第2行线开始，到第3行线结束，即占据第2行 */
        grid-row: 1 / 3;  /* 表示从第1行线开始，到第3行线结束，即跨越第1行和第2行 */
        grid-row: 2 / span 2;  /* 表示从第2行线开始，跨越2行 */

        grid-column: 2 / 3;  /* 表示从第2列线开始，到第3列线结束，即占据第2列 */
        grid-column: 1 / 4;  /* 表示从第1列线开始，到第4列线结束，即跨越第1、2、3列 */
        grid-column: 2 / span 2;  /* 表示从第2列线开始，跨越2列 */
1
2
3
4
5