grid, 是最强大的CSS布局方案. 它的意思是网格, 即这是一种网格布局. 它将网页划分成一个个网格, 可以任意组合不同的网格, 做出各种各样的布局。

grid 布局是二维布局, 尤其适合不规则布局, 其功能比一维布局的flex布局强大. 目前grid布局尚未普及, 只有部分最新的浏览器支持.

  • 注意

本文主要介绍grid布局中常用的属性, 而不是介绍其全部属性.

1. 基本概念

1.1 container

采用网格布局的区域, 称为”容器”（container）.
image.png

1.2 item

容器内部采用网格定位的子元素, 称为”项目”（item）.
image.png

2. container的属性

grid 布局的属性分成两类:
一类定义在容器上面, 称为容器(container)属性;
另一类定义在项目上面, 称为项目(item)属性。
以下介绍一些比较常用的属性.

2.1 display 属性

(1) display: grid
作用: 指定一个容器采用网格布局. 默认容器元素都是块级(block)元素.

  • 语法

    1. .container {
    2.   display: grid;
    3. }

  • 效果图

image.png

(2) display: inline-grid
作用: 指定一个容器为行内元素(inline), 该元素内部采用网格布局.

  • 语法

    1. .container {
    2.   display: inline-grid;
    3. }

  • 效果图

image.png

2.2 grid-template-columns属性,

grid-template-rows属性

容器指定了网格布局以后，接着就要划分行和列.
grid-template-columns属性设置每一列的列宽, grid-template-rows属性设置每一行的行高.

  • 语法

    1. .container { 
    2.    grid-template-columns: 值 值 值 值;
    3.    grid-template-rows: 值 值 值 值;
    4. }

  • 取值

    1. 像素值;
    2. 百分比;
    3. repeat( )
    4. auto;
    5. fr;

  • 举例

    1. .container {
    2. grid-template-columns: 40px 50px auto 50px 40px;
    3. grid-template-rows: 25% 100px auto;
    4. }

    table.jpg

    (1)repeat (出现的次数, 重复的值)

  • 举例
    ```markdown grid-template-columns:20% 20% 20% 20% 20%;可写成 grid-template-columns: repeat(5, 20%);

grid-template-columns:10px 30px 10px 30px;可写成grid-template-columns:repeat(2, 10px 30px);

  1. <a name="wC4KX"></a>
  2. ### (2) fr
  3. 为了方便表示比例关系, 网格布局提供了fr关键字（fraction 的缩写，意为"片段"）. 如果两列的宽度分别为1fr<br />和2fr, 就表示后者是前者的两倍. fr可以和像素值一起使用.
  5. - 举例<br />
  6. ```css
  7. .container {
  8.   grid-template-columns: 1fr 1fr 1fr;
  9. }
  11. .container {
  12.   grid-template-columns: 1fr 400px 1fr;
  13. }

2.3 grid-template-areas属性

网格布局允许指定”区域”（area）, 一个区域由单个或多个单元格组成.
作用: grid-template-areas属性用于定义区域。
注意: 如果某些区域不需要利用，则使用”点”（.)表示.

  • 举例 ```css .item-a { grid-area: header; } .item-b { grid-area: main; } .item-c { grid-area: sidebar; } .item-d { grid-area: footer; }

.container { display: grid; grid-template-columns: 50px 50px 50px 50px; grid-template-rows: auto; grid-template-areas: “header header header header” “main main . sidebar” “footer footer footer footer”; }

  1. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/12879678/1618224136804-a78a668c-d8a6-4d0e-8603-25e337e82d29.png#align=left&display=inline&height=349&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1176&originWidth=1689&size=148527&status=done&style=none&width=501)
  3. <a name="hkF3d"></a>
  4. ### 2.4 grid-column-gap属性,
  5. <a name="yp0RQ"></a>
  6. ###       grid-row-gap属性,
  7. <a name="V3NIT"></a>
  8. ###       grid-gap属性
  9. grid-row-gap属性设置行与行的间隔 (行间距);<br />grid-column-gap属性设置列与列的间隔 (列间距) .
  11. - 举例
  12. ```css
  13. .container {
  14.   grid-template-columns: 100px 50px 100px;
  15.   grid-template-rows: 80px auto 80px; 
  16.   column-gap: 10px;
  17.   row-gap: 15px;
  18. }

gap.jpg

grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式, 语法为

  1. .container{
  2.   grid-gap: <grid-row-gap> <grid-column-gap>;
  3. }

如果grid-gap省略了第二个值，浏览器认为第二个值等于第一个值. 比如

  1. .container{ grid-gap: 20px 20px } , 可以写成 .container { grid-gap: 20px; }
  • 注意
    1. grid-前缀将被删除, grid-column-gap和grid-row-gap重新命名为column-gap和row-gap.
    2. 浏览器Chrome 68 +, Safari 11.2, Release 50+和Opera 54+已支持未添加前缀的属性.

3. item的属性

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

3.1 grid-column-start属性,

grid-column-end属性,

grid-row-start属性,

grid-row-end属性

(1) 作用

  1. grid-column-start属性: 定位左边框所在的垂直网格线;
  2. grid-column-end属性: 定位右边框所在的垂直网格线;
  3. grid-row-start属性: 定位上边框所在的水平网格线;
  4. grid-row-end属性: 定位下边框所在的水平网格线.

(2) 举例

  1. .item-a {
  2.   grid-column-start: 2;
  3.   grid-column-end: five;
  4.   grid-row-start: row1-start;
  5.   grid-row-end: 3;
  6. }

a.jpg

3.2 grid-area属性

(1) 作用
设置item放在哪个区域. 例子参考本文参考本文 2.3 grid-template-areas.
(2) 语法

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

(3) 举例
例子一: .item { grid-area: header}
例子二: .item { grid-area: 1 / 4 / 4 / 6 ; }
例子三: .item { grid-area: 1 / col4-start / last-line / 6; }
这是例子三的效果图
image.png