简述 grid 布局

CSS网格布局擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。学习grid布局之前，请先了解 flex 布局，有一定相似性，但这个更强大一些。

1、属性

1.1 display 网格布局

WX20190808-171445.png

 .grid {
      display: grid;
  }

• 如上图所示，在设置了 grid 之后，元素还是正常块级元素，并没有改变。
• 当然，我们也可以通过 inline-grid 将其设置为行内元素，如下图。

WX20190808-172105.png

1.2 grid-template 设置网格区域

• 设置每一列宽：grid-template-columns: <track-size> ... | <line-name> <track-size> ...
• 设置每一行高：grid-template-rows: <track-size> ... | <line-name> <track-size> ...
• 设置网格布局允许指定区域：grid-template-areas: "<grid-area-name> | . | none | ..." "..."

WX20190808-175133.png

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

• 如上图所示，设置每一列为50px，每一行为50px，也可设为33.33%，等价的。

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

• 也可使用 repeat 属性值，第一个为参数为重复的次数，第二个参数为重复的值。

 .grid {
      display: grid;
      grid-template-rows: 1fr 1fr 1fr; */
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
 }

• 也可使用 fr 属性值(fraction,每一分块区域)，如果两列的宽度分别为 1fr 和 3fr ，就表示后者是前者的三倍。

WX20190808-200158.png

.grid {
    display: grid;
    grid-template-columns: 50px 2fr 1fr;
    grid-template-rows: repeat(3, 1fr);
}

• 上图所示，我们经常会结合px和fr一起用，第一列50px,剩下两列分三份分，第二列是第三列的一倍

WX20190809-141147.png

.grid {
      display: grid;
      grid-template-columns: 50px minmax(40px, 100px) 20px;
      grid-template-rows: repeat(3, 1fr);
}

• 如上图所示，可设置minmax属性值来设置大小，中间这一列最小值为40px，最大值为100px，因此上面列宽依次为50px 80px 20px

WX20190809-142526.png

  .grid {
      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';
      color: white;
    }
    .item-1 {
      grid-area: header;
    }
    .item-2 {
      grid-area: main;
    }
    .item-3 {
      grid-area: sidebar;
    }
    .item-4 {
      grid-area: footer;
    }

• 如上图所示，grid-template-areas 设置4x3网格， grid-area 对应所选区域，. 代表不填充，留空白

1.3、grid-gap设置行与行间距、列与列间距

grid-gap: <grid-row-gap> <grid-column-gap>

WX20190809-143239.png

.grid {
     display: grid;
     grid-template-columns: 100px 50px 100px;
     grid-template-rows: 80px auto 80px;
     grid-gap: 15px 10px;
}

如上图所示，设置行间距为15px，列间距为10px

1.4、place-items 设置网格内容的位置

place-items: <align-items> <justify-items> 先竖直后水平
水平位置：justify-items: start | end | center | stretch
竖直位置：align-items: start | end | center | stretch

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

WX20190809-144805.png

如上图所示，竖直位置内容从上到下排列，水平位置内容从左到右排列

WX20190809-144932.png

.grid {
      display: grid;
      grid-template-columns: repeat(3, 50px);
      grid-template-rows: repeat(3, 50px);
      place-items: start stretch;
}

如上图所示，竖直位置内容从上到下排列，水平位置拉伸占满网格的整个宽度。

1.5、place-content 设置整个内容区域在容器里面的位置

place-content: <align-content> <justify-content>
水平位置：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: 将网格对齐以与容器的末端边缘齐平
• stretch: 调整网格的大小填充容器的整个宽度(默认值)
• space-around: 每个网格两侧的间隔相等，两端到容器的间隔是网格的一半
• space-between: 网格与网格的间隔相等，网格与容器边框之间没有间隔
• space-evenly: 每个网格之间间距相同，包括到两端距离

WX20190809-145213.png

.grid {
    box-shadow: 0px 0px 2px 1px #cccccc;
    width: 250px;
    height: 250px;
    display: grid;
    grid-template-columns: repeat(3, 50px);
    grid-template-rows: repeat(3, 50px);
    place-content: end end;
}

如上图所示，整个内容区在容器的水平方向末端，竖直方向末端。

WX20190809-145342.png

.grid {
    box-shadow: 0px 0px 2px 1px #cccccc;
    width: 250px;
    height: 250px;
    display: grid;
    grid-template-columns: repeat(3, 50px);
    grid-template-rows: repeat(3, 50px);
    place-content: space-evenly space-evenly;
}

如上图所示， 每个网格之间间距相同，包括到两端距离。

1.6、grid-auto-rows grid-auto-column 设置超出定义网格的网格大小

WX20190809-145618.png

如上图所示，定义一个3x3网格，第10个网格超出区域，超出行的高度为80px。

1.7、grid-row grid-column 设置网格自身起始、终止线

grid-column: grid-column-start / grid-column-end
grid-row: grid-row-start / grid-row-end
grid-column: <start-line> / <end-line> | <start-line> / span <value>
grid-row: <start-line> / <end-line> | <start-line> / span <value>

WX20190809-145823.png

.grid {
    box-shadow: 0px 0px 2px 1px #cccccc;
    width: 250px;
    height: 250px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(3, 50px);
    grid-template-rows: repeat(4, 50px);
  }

  .item-1 {
    /* 简写 */
    grid-row: 2 / 4;
    grid-column: 2 / 4;
    /* 拆开写相同*/
    /* grid-row-start: 2;
    grid-row-end: 4;
    grid-column-start: 2;
    grid-column-end: 4; */
  }

如上图所示，定义一个3x3网格，第一个网格水平方向起始线为2，终止线为4，竖直方向起始线为2，终止线为4，剩下的网格会按默认依次排列。

1.8、place-self 设置单元网格内容位置。

place-self: <align-self> <justify-self>
justify-self: start | end | center | stretch
align-self: start | end | center | stretch

WX20190809-150057.png

.grid {
    box-shadow: 0px 0px 2px 1px #cccccc;
    width: 250px;
    height: 250px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(3, 50px);
    grid-template-rows: repeat(3, 30px);
  }

  .item-1 {
    place-self: center center;
  }

如上图所示，item-1在第一个网格上下左右中间位置。

grid 的兼容性

WX20190809-150219.png

感兴趣的同学可以直接进入网站看：https://caniuse.com/#search=css%20grid

参考链接

• https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout

• https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template-areas

• http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html