css--栅格系统

什么是栅格？

CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。 这是一个二维系统，这意味着它可以同时处理列和行。

兼容性：参考 https://caniuse.com/

1.声明容器

块级容器

display:grid;

行级容器

display:inline-grid;

---

2.划分行列

grid-template-columns  划分列数
grid-template-rows    划分行数

固定宽度

使用固定宽度划分时，当容器宽度过大时将漏白。

grid-template-rows: 100px 100px;     两行，每行高100px
grid-template-columns: 100px 100px 100px;  三列，每行宽100px

百分比划分

使用百分比自动适就容器。

grid-template-rows: 50% 50%;   两行，每行占容器高的50%
grid-template-columns: 25% 25% 25% 25%;     四列，每行占容器的25%

重复设置

使用 repeat 统一设置值，第一个参数为重复数量，第二个参数是重复值

grid-template-rows: repeat(2, 50%);        两行，每行占容器的一半
grid-template-columns: repeat(2, 50%);     两列，每列占容器的一半

可以设置多个值来定义重复

grid-template-rows: repeat(2, 50%);
grid-template-columns: repeat(2, 100px 50px); 四列，分别宽  100px 50px 100px 50px

自动填充

自动填充是根据容器尺寸，自动设置元素尺寸，auto-fill只能设置在第一个，根据后面给的尺寸，自动分配有多少个。

grid-template-rows: repeat(auto-fill, 100px);
grid-template-columns: repeat(auto-fill, 100px);

比例划分

使用 fr 单位设置元素在空间中所占的比例，1fr 2fr (总空间/总份数)* 当前元素份数 = 当前元素所占空间

grid-template-rows:1fr 2fr;
grid-template-columns:100px 1fr 2fr;    (总空间-100px)/总份数*当前份数

重复定义

grid-template-rows:repeat(2,1fr);
grid-template-columns:repeat(2,1fr,2fr);

自动空间

容器内其他元素有固定宽or高时候，设置一个为auto将自动撑满容器。

组合定义

grid-template:grid-template-rows / grid-template-columns;

minmax

在不同设备上，我们不希望一个元素过小或者过大，就设置一个minmax让他在一个范围内自适应大小。

---

间距定义

行间距

row-gap   顾名思义，设置行与行之间的间距

列间距

column-gap

组合定义

gap：row-gap column-gap;

---

栅格命名

栅格线可以使用命名与编号找到，方便控制指定栅格，或将内容添加到指定栅格中。

独立命名

可以为每个栅格独立命名来进行调用。

eg.
grid-template-rows: [r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end];
三行三列
grid-template-columns: [c1-start] 100px [c1-end c2-start] 100px [c2-start c3-start] 100px [c3-end];

自动命名

对于重复设置的栅格系统会自动命名，使用时使用 c1、c2 的方式定位栅格。

eg.   三行三列，会自动命名
grid-template-rows: repeat(3, [r-start] 100px [r-end]);
grid-template-columns: repeat(3, [c-start] 100px [c-end]);

使用的时候
 grid-row-start: r-start 2;
 grid-column-start: c-start 2;
 grid-row-end: r-start 2;
 grid-column-end: c-end 2;

---

元素定位

样式属性	说明
grid-row-start	行开始栅格线
grid-row-end	行结束栅格线
grid-column-start	列开始栅格线
grid-column-end	列结束栅格线

上面的每个样式可以使用下列属性

属性值	说明
Line	栅格络
span 数值	栅格包含的栅格数量
span 区域名称	栅格包含到指定的区域名称
auto	自动设置，默认为一个网格宽度和高度

根据栅格线确定区域

通过设置具体的第几条栅格线来设置区域位置，设置的数值可以是正数和负数。

eg.
 grid-row-start: 2;
 grid-row-end: 4;
 grid-column-start: 2;
 grid-column-end: 4;

根据栅格命名确定区域

eg.
grid-template-rows: [r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end];
grid-template-columns: [c1-start] 100px [c1-end c2-start] 100px [c2-start c3-start] 100px [c3-end];

grid-row-start: r1-end;
grid-column-start: c2-start;
grid-row-end: r3-start;
grid-column-end: c3-start;

根据自动命名确定区域

对于重复设置的栅格系统会自动命名，使用时使用 c 1、c 2 的方式定位栅格。

eg.
 grid-template-rows: repeat(3, [r-start] 100px [r-end]);
 grid-template-columns: repeat(3, [c-start] 100px [c-end]);

 grid-row-start: r-start 2;
 grid-column-start: c-start 2;
 grid-row-end: r-start 2;
 grid-column-end: c-end 2;

根据偏移量确定区域

使用 span 可以设置包含栅格的数量或包含到的区域名称。

示例	说明
grid-row-start:2 grid-row-end:span 2	从第二行起向下包含2行
grid-column-start:2 grid-column-end:span 2	从第二列起向右包含2行
grid-column-end:span 2	从默认位置开始向下包含2 ，其余同理

简写模式

可以使用 grid-row 设置行栅格线，使用 grid-column 设置列栅格线。

grid-row: 2/4;            2行开始，4行结束
grid-column: 2/4;        同理

grid-area

grid-area更加简洁是同时对 grid-row 与 grid-column 属性的组合声明。

grid-area: grid-row-start/grid-column-start/grid-row-end/grid-column-end。

命名定位

可以使用栅格线命名来附加元素。

eg.
grid-template-rows: repeat(auto-fill, [r] 100px);
grid-template-columns: repeat(auto-fill, [l] 100px);

grid-area: r 2/l 2/r 4/l 4;

区域声明

区域是由多个单元格构成，使用 grid-template-areas可以定义栅格区域，并且栅格区域必须是矩形的。

eg.
grid-template-rows: 80px 1fr 50px;
grid-template-columns: 100px 1fr 50px 60px;
grid-template-areas: 
        "header header header header"
        "nav main main aside"
        "footer footer footer footer";
在划分好栅格后，给栅格命名分区，上述例子划分成了3行4列共12个栅格，所以给每个栅格打上标签。
html代码

<header></header>
<nav></nav>
<main></main>
<aside></aside>
<footer></footer>

给每个标签自己的区域
 main {
        /* 完整的写法*/
    /* grid-area: main-start/main-start/main-end/main-end; */
    grid-area: main;        /*简写*/
    background: #E9EEEF;
}

header {
    background: #2EC56C;
    grid-area: header;
}

nav {
    background: #E1732C;
    grid-area: nav;
}

aside {
    grid-area: aside;
    background: #EEBC31;
}

footer {
    grid-area: footer;
    background: #904FA9;
}

简写形式

使用grid-template进行栅格划分会更简洁。

语法格式
grid-template:
  '栅格名称 栅格名称 栅格名称 栅格名称' 行高
  '栅格名称 栅格名称 栅格名称 栅格名称' 行高
  '栅格名称 栅格名称 栅格名称 栅格名称' 行高/列宽 列宽 列宽 列宽;

区域命名

系统会为区域自动命名，譬如上述例子中的栅格线会被命名为 header-start / header-end 之类的，此时栅格线的使用方法与之前命名使用方法相同。

区域占位

要是使用同一名字，该区域将被打通，用 ... ... 进行占位的时候不会被打通，栅格位置本来就够用，就可以使用占位优化代码，不用每个区域都声明。

grid-template-areas:
        "header .  ."
        "top .  ."
        "bottom bottom bottom";

   ps：使用几个... 都无所谓，解释得不清楚的地方    https://www.bilibili.com/video/BV1tJ411Y7fB?p=146

---

栅格流动

在容器中设置grid-auto-flow 属性可以改变单元格排列方式。

选项	说明
column	按列排序
row	按行排列
dense	元素使用前面空余栅格(下面有示例说明)

对齐管理

类似flex布局的方式

选项	说明	对象
justify-content	所有栅格在容器中的水平对齐方式，容器有额外空间时	栅格容器
align-content	所有栅格在容器中的垂直对齐方式，容器有额外空间时	栅格容器
align-items	栅格内所有元素的垂直排列方式	栅格容器
justify-items	栅格内所有元素的横向排列方式	栅格容器
align-self	元素在栅格中垂直对齐方式	栅格元素
justify-self	元素在栅格中水平对齐方式	栅格元素

justify-content、align-content等属性的值与flex布局类似，这里不再赘述。

---

自动排列

当栅格无法放置内容时，系统会自动添加栅格用于放置溢出的元素，我们需要使用以下属性控制自动添加栅格的尺寸。

选项	说明	对象
grid-auto-rows	grid-auto-rows	容器
grid-auto-columns	控制自动增加的栅格列的尺寸，grid-auto-flow: column;	容器

终级简写

grid是简写属性，可以用来设置：

• 显式网格属性 grid-template-rows、grid-template-columns和 grid-template-areas，
• 隐式网格属性 grid-auto-rows、grid-auto-columns 和 grid-auto-flow，
• 间距属性 grid-column-gap和 grid-row-gap
  grid:<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>