css grid 随笔

原文出自Arien的博客 https://www.w3cplus.com/css3/line-base-placement-layout.html

首先定义一个网格

1.可以给父容器的display属性设置为grid或者inline-grid来定义一个网格。这样你就可以使用grid-template-columns和grid-template-rows属性来创建一个网格。

 

.wrapper { display: grid; grid-template-columns: 100px 10px 100px 10px 100px; grid-template-rows: auto 10px auto; }

指定了列宽、列间距，行高和行间距等。

 

2.网格线的简写方式，其实就是grid-column和grid-row的start与end值合并在一起，两者之间用/来分隔。

.a{ grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; }

可简写为

.a{ grid-column: 1 / 2; grid-row: 1 / 2; }

3.在CSS Grid Layout中有一个关键东东，网格区域grid-area。

网格区域他是由四条网格线组成的一个空间。

组成网格区域的网格线顺序是row-start/column-start/row-end/column-end。每个网格线之间也是使用/来分隔。

.a{ grid-area: 1 / 1 / 2 / 2; }

 

 

 

自定义网格线名称

CSS Grid Layout模块中还提供了自定义网格线名称，然后使用定义好的名称来制作网格布局。

.wrapper { display: grid; grid-template-columns: (col1-start) 100px (col1-end) 10px (col2-start) 100px (col2-end) 10px (col3-start) 100px (col3-end); }

.a{ grid-column: col1-start / col3-end; grid-row: row1-start; }

 

自定义网格线配合关键词span合并单元格

上面那种自定义网各线的方法好是好，但也有一个问题，如果网格线少，还是蛮方便的，不过网格一多，网格线也多起来，每条网格线都定义名称是不是太费时费力了。

其实在CSS Grid Layout中不需要这么做，你完全可以给网格线定义相同的名称，然后使用关键词span添加到特定的目标网格线。这种方法对于创建一些复杂的网格（包括多个网格与列间距）是非常方便的。

在实际使用中，可以在网格内容轨道前的网格线都定义为col，而在列间距轨道前的网格线都定义为gutter。

在调用时，可以使用col <line number>来指定开始的网格线，配合关键词span <number of lines of that name>来指写网格的跨度。

 

.wrapper { display: grid; grid-template-columns: (col) 100px (gutter) 10px (col) 100px (gutter) 10px (col) 100px (gutter) 10px (col) 100px (gutter) 10px (col) 100px (gutter) 10px (col) 100px (gutter); grid-template-rows: (row) auto (gutter) 10px (row) auto (gutter) 10px (row) auto (gutter) 10px (row) auto; }

.a{ grid-column: col / span gutter 2; grid-row: row; } .b { grid-column: col 3 / span gutter 2; grid-row: row; }

 

repeat关键词

在上例中，不难发现列和行都有很多重复的，比如：列网格线有六个(col) 100px (gutter) 10px，而行网格线有四个(row) auto (gutter) 10px。其实在CSS Grid Layout没有必要这么痛苦，他提供了一个关键repeat，完全可以使用repeat来让你的代码变得更简洁。

使用repeat的代码如下：

.wrapper {
  display: grid;
  grid-template-columns:repeat(6, (col) 100px (gutter) 10px); 
  grid-template-rows: repeat(4, (row) auto (gutter) 10px );
}