css-Grid

display属性

display: grid; 指定一个容器采用网格布局.
```
div {
    display: grid;
}
```
默认情况下, 容器元素都是块级元素, 也可以设为行内元素.
```
div {
    display: inline-grid;
}
```

二. grid-template-columns属性和 grid-template-rows属性

想要多少行或者列, 就填写相应属性值的个数, 不填写自动分配

grid-template-columns属性定义每一列的列宽.
grid-template-rows属性定义每一行的行宽.

div {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}

1. repeat()

有时候, 重复写同样的值非常麻烦, 尤其网格很多时, 可以使用repeat()函数

repeat() 接受两个参数, 第一个是重复的次数, 第二个参数是所要重复的值.

.box {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(4, 100px);
}

repeat() 也重复某种模式.

.box {
    display: grid;
    grid-template-columns: repeat(2, 100px 20px 80px);
    grid-template-rows: repeat(3, 100px);
}

上面的代码定义了6列3行, 相当于创建了两次宽度分别为100px 20px 80px的列

2. auto-fill关键字

有时, 单元格的大小是固定的, 但是容器的大小不确定

如果希望每一行容纳尽可能多的单元格, 这时可以使用 auto-fill 关键字表示自动填充.

div {
    display: grid;
    grid-template-columns: repeat(auto-fill, 100px);
    grid-template-rows : repeat(3, 100px);
}

上面的代码表示每列宽度100px, 每行宽度100px, 创建三行.
然后自动填充, 直到容器不能放置更多的列.

3. fr关键字

为了方便表示比例关系, 网格布局提供了fr关键字

如果两列的宽度分别为 1fr 和 2fr, 表示后者是前者的两倍.

div {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: repeat(2, 100px);
}

4. minmax()

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

div {
    display: grid;
    /* 代表两列 */
    grid-template-columns: 1fr minmax(150px, 200px);
    /* 代表三行 */
    grid-template-rows: repeat(3, 100px);
}

//上面代码表示两列三行第一列占父盒子宽度的一半,

5. auto

表示由浏览器自己决定长度

.main {
    display: grid;
    width: 600px;
    height: 600px;
    grid-template-columns: 100px auto 100px;
    grid-template-rows: repeat(4, 100px);
    border: 2px solid red;
}

//上面代码表示中间的宽度由浏览器决定, 自动分配

6. 网格线

可以用方括号定义网格线名称

.main {
    /* 代表两列 */
    grid-template-columns: [c1] 100px [c2] auto [c3] 100px [c4];
    /* 代表四行 */
    grid-template-rows: repeat(4, 100px);
}

三. column-gap属性和row-gap属性

表示的是item相互之间的距离. 写在容器上

 .main {
    display: grid;
    grid-template-columns: [c1]100px [c2]auto [c3]100px [c4];
    grid-template-rows: repeat(4, 100px);
    /* 列间距  */
    column-gap: 20px;
    /* 行间距  */
    row-gap: 20px;
    border: 2px solid red;
}

四. gap属性

gap 属性有两个属性,

写一个表示行间距和列间距各有指定的间距.
写两个, 第一个表示行间距, 第二个表示列间距.

五. grid-template-areas属性

一个区域由单个或多个单元格组成, 需要在项目属性里面设置

.main {
    display: grid;
    /* 代表三列 */
    grid-template-columns: [c1]100px [c2]auto [c3]100px [c4];
    /* 代表四行 */
    grid-template-rows: repeat(4, 100px);
    /* 行间距20 列间距30px */
    gap: 20px 30px;
    /* 分区 */
       grid-template-areas: "header header header"
                          "main main sidebar"
                          "footer footer footer";
    border: 2px solid red;
}
//上面代码中，顶部是页眉区域header，底部是页脚区域footer，中间部分则为main和sidebar。
区域不需要利用, 则使用点 (.) 表示

.main {
    display: grid;
    /* 代表三列 */
    grid-template-columns: [c1]100px [c2]auto [c3]100px [c4];
    /* 代表四行 */
    grid-template-rows: repeat(4, 100px);
    /* 行间距20 列间距30px */
    gap: 20px 30px;
    grid-template-areas: 'a . c''d . f''g . i''j';
    border: 2px solid red;
}

五. grid-auto-flow属性

划分网格以后, 容器的子元素会按照属性, 自动放置在每一个网格,
默认顺序是先行后列
可以用grid-auto-flow属性修改默认顺序

默认

grid-auto-flow: column; 修改排放顺序

grid-auto-flow属性除了设置成row和column，还可以设成row dense和column dense。这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。

六. justify-items属性和align-items属性

设置单元格内容的水平和垂直的对齐方式

justify-items 表示水平方向
align-items 表示垂直方向

语法

justify-items: start | end | center | stretch;

属性

start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。

示范

align-items: start;
justify-items: start;

七. place-items属性

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

place-items:  ;

八. justify-content 属性，align-content 属性，place-content 属性

justify-content属性是整个内容区域在容器里面的水平位置（左中右）
align-content属性是整个内容区域的垂直位置（上中下）。

语法

.container {
    justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
    align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

属性

start - 对齐容器的起始边框。
end - 对齐容器的结束边框。
center - 容器内部居中。
stretch - 项目大小没有指定时，拉伸占据整个网格容器。
space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。
space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

place-content属性

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

语法

place-content:

八. grid-auto-columns 和 grid-auto-rows属性

用来设置多出来的项目宽和高

.main {
    display: grid;
    grid-template-columns: [c1]100px [c2]100px [c3]100px [c4];
    grid-template-rows: repeat(3, 100px);
    grid-auto-rows: 50px;
}

三、项目属性

一. grid-column-start 属性，grid-column-end 属性，grid-row-start 属性，grid-row-end 属性

grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线

二. grid-column 和 grid-row 属性

grid-column : grid-column-start 属性和 grid-column-end 属性的简写形式
grid-row : grid-row-start 属性和 grid-row-end 属性的简写形式.

.item-1 {
    background-color: red;
    grid-column: 1 / 3;
}

上述代码表示1号项目的左边框是第一根垂直网格线. 右边框是第三根垂直网络线.

三. span关键字

指定项目放在哪一个区域

语法

grid-area: b;

用法

.item-1 {
    background-color: red;
    grid-column: span 2;
    grid-area: b;
}

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

语法

.item {
    grid-area:  /  /  / ;
}

.item-1 {
    grid-area: 1/1/3/3;
}

五. justify-self 属性，align-self 属性，place-self 属性

justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。

align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。

.item {
    justify-self: start | end | center | stretch;
    align-self: start | end | center | stretch;
}

属性

start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。

place-self

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

place-self:  ;

转自CSDN：

(311条消息) CSS - grid布局_学习中的小菜鸟.的博客-CSDN博客_css grid 动态

CSS