CSS Grid 布局

CSS Grid 布局

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout
https://ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

1. container 和 item

采用网格布局的区域，称为"容器"（container）。 container 内部采用网格定位的子元素，称为"项目"（item）。

2. container 属性

display: grid

指定一个 container 采用网格布局

.container {
    display: grid;
}

grid-template-rows

grid-template-columns

• container 指定了网格布局以后，接着就要划分行和列。
• grid-template-columns 属性定义每一列的列宽，
• grid-template-rows 属性定义每一行的行高。

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;

    /* 以上代码，指定了一个三行三列的网格，行高、列宽都是100px。 */
    
   
   
    /* 还可以使用 百分比 */
    grid-template-columns: 33.33% 33.33% 33.33%;
    grid-template-rows: 33.33% 33.33% 33.33%;

    
}

repeat（）

    /* 
    还可以使用 repeat() 函数
    repeat() 接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值
    */
    grid-template-columns: repeat(3, 33.33%);
    grid-template-rows: repeat(3, 33.33%);

    
    
    
    /* repeat() 重复某种模式也是可以的 */
    grid-template-columns: repeat(2, 100px 20px 80px);

auto-fill

auto-fit

• 有时，单元格的大小是固定的，但是 container 的大小不确定。
• 如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用 auto-fill 关键字表示自动填充。
• 以下代码表示每列宽度100px，然后自动填充，直到 container 不能放置更多的列

.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 100px);
}

除了 auto-fill，还有一个关键字 auto-fit ，两者的行为基本是相同的。
只有当 container 足够宽，可以在一行容纳所有单元格，并且单元格宽度不固定的时候，才会有行为差异：auto-fill 会用空格子填满剩余宽度，auto-fit 则会尽量扩大单元格的宽度。

fr

• 为了方便表示比例关系，网格布局提供了 fr 关键字（fraction 的缩写，意为"片段"）。
• 如果两列的宽度分别为 1fr 和 2fr ，就表示后者是前者的两倍。
• 以下代码表示两个相同宽度的列。

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    
    /* fr 可以和绝对长度单位结合使用 */
    /* 以下代码表示，第一列的宽度为150像素，第二列的宽度是第三列的一半 */
    grid-template-columns: 150px 1fr 2fr; 
}

minmax（）

minmax() 函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值

/* minmax(100px, 1fr)表示列宽不小于100px，不大于1fr */
grid-template-columns: 1fr 1fr minmax(100px, 1fr);

auto

auto 关键字表示由浏览器自己决定长度

.container {
    /* 
    第二列的宽度，基本上等于该列单元格的最大宽度，
    除非单元格内容设置了min-width，且这个值大于最大宽度。 
    */
    grid-template-columns: 100px auto 100px;
}

网格线命名

• grid-template-columns 属性和 grid-template-rows 属性里面，

• 还可以使用方括号，指定每一根网格线的名字，方便以后的引用。

• 下面代码指定网格布局为3行 x 3列，

• 因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。

• 网格布局允许同一根线有多个名字，比如[fifth-line row-5]

.container {
    display: grid;
    grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
    grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

grid-row-gap -> row-gap

grid-column-gap -> column-gap

grid-gap -> gap

grid-row-gap 属性设置行与行的间隔（行间距），
grid-column-gap 属性设置列与列的间隔（列间距）。
grid-gap 属性是 grid-row-gap 和 grid-column-gap 的合并简写形式，
如果 grid-gap 省略了第二个值，浏览器认为第二个值等于第一个值，语法如下。

根据最新标准，上面三个属性名的 grid- 前缀已经删除，grid-column-gap 和 grid-row-gap 写成 column-gap 和 row-gap ，grid-gap 写成 gap。

div {
    display: grid;
    /* 行列之间没有 20+20=40px 的情况 */
    grid-column-gap: 20px;
    grid-row-gap: 20px;

    
    /* 使用 grid-gap 合并 */
    grid-gap: <grid-row-gap> <grid-column-gap>;
    grid-gap: 20px 20px;
    /* 如果grid-gap省略了第二个值，浏览器认为第二个值等于第一个值 */
    grid-gap: 20px;
    
    /* 最新标准语法 */
    
    row-gap: 20px;
    column-gap: 20px;
    gap: <grid-row-gap> <grid-column-gap>;
    gap: 20px 20px;
    gap: 20px;
}

grid-template-areas

• 网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。
• grid-template-areas 属性用于定义区域。
• 以下代码先划分出9个单元格，然后将其定名为 a 到 i 的九个区域，分别对应这九个单元格

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-template-areas: 'a b c'
                         'd e f'
                         'g h i';
                         
    /* 多个区域合并到一个区域的写法 */
    grid-template-areas: 'a a a'
                         'b b b'
                         'c c c';
                         
                        
    /*
    如果某些区域不需要利用，则使用"点"（.）表示。
    下面的代码，中间一列为点，表示没有用到该单元格，或者该单元格不属于任何区域
    */
    
    grid-template-areas: 'a . c'
                         'd . f'
                         'g . i';
}

• 一个布局实例。
• 以下代码中，顶部是页眉区域header，底部是页脚区域footer，中间部分则为main和sidebar。

.container {
    /* 省略其他的 css ... */
    
    grid-template-areas: "header header header"
                         "main main sidebar"
                         "footer footer footer";
}

• 注意，区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为 区域名-start ，终止网格线自动命名为 区域名-end。
• 比如，区域名为header，则起始位置的水平网格线和垂直网格线叫做 header-start ，终止位置的水平网格线和垂直网格线叫做 header-end。

grid-auto-flow

• 划分网格以后， container 的子元素会按照顺序，自动放置在每一个网格。

• 默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行。

• 这个顺序由 grid-auto-flow 属性决定，默认值是 row ，即"先行后列"。

• 也可以将它设成 column ，变成"先列后行"。

• grid-auto-flow属性除了设置成 row 和 column，

• 还可以设成 row dense 和 column dense。

• decse 意为"密集的"

• 这两个值主要用于，某些 item 指定位置以后，剩下的 item 怎么自动放置。

grid-auto-flow: row dense;

justify-items

align-items

place-items

justify-items 属性设置单元格内容的水平位置（左中右），
align-items 属性设置单元格内容的垂直位置（上中下）。

• 这两个属性的写法完全相同，都可以取下面这些值。
• start ：对齐单元格的起始边缘。
• end ：对齐单元格的结束边缘。
• center ：单元格内部居中。
• stretch ：拉伸，占满单元格的整个宽度（默认值）。

place-items 属性是 align-items 属性和 justify-items 属性的合并简写形式。

.container {
    justify-items: start;
    align-items: end;
    
    
    place-items: <align-items> <justify-items>;
    place-items: end start;
    place-items: center;
}

justify-content

align-content

place-content

• justify-content 属性是整个内容区域在 container 里面的水平位置（左中右），

• align-content 属性是整个内容区域的垂直位置（上中下）。

• 这两个属性的写法完全相同，都可以取下面这些值。

• start ：对齐单元格的起始边缘。

• end ：对齐单元格的结束边缘。

• center ：单元格内部居中。

• stretch ：拉伸，占满单元格的整个宽度（默认值）。

• space-around : 每个 item 两侧的间隔相等。所以， item 之间的间隔比 item 与 container 边框的间隔大一倍。

• space-between : item 与 item 的间隔相等， item 与 container 边框之间没有间隔。

• space-evenly : item 与 item 的间隔相等， item 与 container 边框之间也是同样长度的间隔。

• place-content 属性是 align-content 属性和 justify-content 属性的合并简写形式。

.container {
    justify-content: start;
    align-content: end;
    
    place-content: <align-content> <justify-content>;
    place-content: end start;
    place-content: center;
}

• justify-content 与 justify-items 相比，（ align-content 与 align-items 相比类似）
• justify-content 修饰每个网格的状态，justify-items 修饰网格内 items 的状态，
• 可以看到 justify-content 比 justify-items 多了 space-around、space-between、space-evenly
• 等属性，这些属性都是用来修饰网格之间的距离

grid-auto-columns

grid-auto-rows

• 有时候，一些 item 的指定位置，在现有网格的外部。比如网格只有3列，但是某一个 item 指定在第5行。这时，浏览器会自动生成多余的网格，以便放置 item 。

• grid-auto-columns 属性和 grid-auto-rows 属性用来设置，浏览器自动创建的多余网格的列宽和行高。它们的写法与 grid-template-columns 和 grid-template-rows 完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。

• 下面的代码，划分好的网格是3行 x 3列。

• 指定新增的行高（上下高度）统一为50px（原始的行高为100px）

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

grid-template

grid

• grid-template 属性是grid-template-columns 、grid-template-rows 和 grid-template-areas 这三个属性的合并简写形式。
• grid 属性是 grid-template-rows 、grid-template-columns 、grid-template-areas 、 grid-auto-rows 、grid-auto-columns 、grid-auto-flow 这六个属性的合并简写形式。
• 从易读易写的角度考虑，还是建议不要合并属性。

3. item 属性

grid-column-start

grid-column-end

grid-row-start

grid-row-end

• item 的位置是可以指定的，具体方法就是指定 item 的四个边框，分别定位在哪根网格线。

• grid-column-start 属性：左边框所在的垂直网格线

• grid-column-end 属性：右边框所在的垂直网格线

• grid-row-start 属性：上边框所在的水平网格线

• grid-row-end 属性：下边框所在的水平网格线

• 以下代码表示，1号 item 的左边框是第二根垂直网格线，右边框是第四根垂直网格线。

• 只指定了1号 item 的左右边框，没有指定上下边框，所以会采用默认位置，即上边框是第一根水平网格线，下边框是第二根水平网格线。

.item-1 {
    grid-column-start: 2;
    grid-column-end: 4;
    
    /* 这四个属性的值，除了指定为第几个网格线，还可以指定为网格线的名字。 */
    grid-column-start: header-start;
    grid-column-end: header-end;
}

span

• 这四个属性的值还可以使用 span 关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。
• 以下代码表示，1号 item 的左边框距离右边框跨越2个网格。

.item-1 {
    grid-column-start: span 2;
    
    /* 等同于 */
    
    grid-column-end: span 2;
}

• 使用这四个属性，如果产生了 item 的重叠，则使用 z-index 属性指定 item 的重叠顺序。

grid-column

grid-row

• grid-column 属性是 grid-column-start 和 grid-column-end 的合并简写形式，

• grid-row 属性是 grid-row-start 属性和 grid-row-end 的合并简写形式。

• 以下代码中， item 中 item-1占据第一行，从第一根列线到第三根列线

.item {
    grid-column: <start-line> / <end-line>;
    grid-column: 1 / 3;

    grid-row: <start-line> / <end-line>;
    grid-row: 1 / 2;
    
    
    /* 等同于 */
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
}

• 这两个属性之中，也可以使用 span 关键字，表示跨越多少个网格
• 以下代码中， item 中 item-1占据的区域，包括第一行 + 第二行、第一列 + 第二列

.item-1 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

/* 等同于 */

.item-1 {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
}

• 斜杠以及后面的部分可以省略，默认跨越一个网格。

.item-1 {
    grid-column: 1;
    grid-row: 1;
}

grid-area

grid-area 属性指定 item 放在哪一个区域。
以下的代码中，1号 item 位于e区域

.item-1 {
    grid-area: e;
}

• grid-area 属性还可用作 grid-row-start、 grid-column-start 、 grid-row-end 、 grid-column-end 的合并简写形式，直接指定 item 的位置。

.item {
    grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
    grid-area: 1 / 1 / 3 / 3;
}

justify-self

align-self

place-self

• justify-self 属性设置单元格内容的水平位置（左中右），跟 justify-items 属性的用法完全一致，但只作用于单个 item ，用来覆盖 justify-items 的全局设置。
• align-self 属性设置单元格内容的垂直位置（上中下），跟 align-items 属性的用法完全一致，也是只作用于单个 item ，用来覆盖 align-items 的全局设置。

place-self 属性是 align-self 属性和 justify-self 属性的合并简写形式。

place-self: <align-self> <justify-self>;