成为container

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

行和列

gird-template-columns

grid-template-rows

image.png

给每条线取名字（一般不取名）

image.png
image.png

设置范围

  1. a{
  2.   grid-column-start：2;   #行起点第2跟线 
  3.   grid-column-end:five;   #行起点第5跟线
  4.   grid-column: 2 / 4;    #从第二根线开始，从第四根线结束
  5.   grid-column: 2 / span 3;    #从第二根线开始，过三个格子结束
  6.   grid-row-start:row1-start;   #列起点第1根线
  7.   grid-row-end:3;   #列起点第3跟线
  8. }

fr-free space（份）

image.png
image.png

分区grid-template-areas

image.png
image.png

空隙gap

格子与格子之间的间隔大小

  • grid-gap: px;

（不用使用-margin技巧了）
image.png

缩写repeat

如grid-template-rows: 240px 120px 120px 120px 120px;
可写为rid-template-rows:240px repeat(4,120px);

1-经验

  1. 空着部分：用 . 表示

  2. 以用span关键词来指定你所要跨越的宽度（注意span只能是正值）

    1. 如：grid-column-end: span 2;

      2-实例

  3. 效果图：

    1. 代码链接：http://js.jirengu.com/kukuj/1/edit?html,css,output

image.png

  1. 效果图：
    1. 代码链接：http://js.jirengu.com/zefitudeya/1/edit?html,css,output

image.png