写在前面

grid布局一般用于二维布局，一维布局一般用flex，grid尤其适合不规则布局，但尚未普及。

以下图片来源于 css-tricks

附上一个很好地练习和理解grid布局各种语句的小游戏：

cssgridgarden

1. 让一个元素变成grid容器

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

2. Grid Container

2.1 grid-template-columns (列)

grid-template-rows (行)

  1. .container {
  2.   grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
  3.   grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
  4. }

：轨道尺寸大小，可以是具体长度、百分数或者所占份数 fr（fraction of the free space）

：线的名字（自己给每条线命的名）

只有轨道尺寸

00.png

长度为 px

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

单位为份数 fr

份数就是指在当前可用空间进行按份分配

  1. .container {
  2.   grid-template-columns: 1fr 1fr 1fr;
  3. }//每个item为容器的1/3宽度
  1. .container {
  2.   grid-template-columns: 1fr 50px 1fr 1fr;
  3. }//除去50px后的空间平均分成3份，一样一份

给线条命名

  1. .container {
  2.   grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  3.   grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
  4. }

01.png

一条线可以有一个或多个名字

  1. .container {
  2.   grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
  3. }

线条命名用来干嘛

  1. 可以给item设置具体范围
  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. }
  1. 如果多个行共享相同的名称，则可以通过其行名称和计数来引用它们
  1. .item {
  2.   grid-column-start: col-start 2;//名为col-start的第2条线
  3. }

repeat用法

如果定义包含重复部分，则可以使用repeat（）表示法简化操作

  1. .container {
  2.   grid-template-columns: repeat(3, 20px [col-start]);
  3. }

等价于：

  1. .container {
  2.   grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
  3. }

2.2 grid-template-areas

通过引用使用grid-area属性指定的网格区域的名称来定义网格模板。
重复网格区域的名称会使内容跨越那些单元格。
句点表示一个空单元格。
语法本身提供了网格结构的可视化。

名称 意义
grid-area指定的网格区域的名称
. 句号表示空单元格
none 没有定义网格区域 
  1. .container {
  2.   grid-template-areas: 
  3.     "<grid-area-name> | . | none | ..."
  4.     "...";
  5. }

举例说明

  1. .container {
  2.   display: grid;
  3.   grid-template-columns: 50px 50px 50px 50px;
  4.   grid-template-rows: auto;
  5.   grid-template-areas: 
  6.     "header header header header"
  7.     "main main . sidebar"
  8.     "footer footer footer footer";
  9. }
  11. .item-a {
  12.   grid-area: header;
  13. }
  14. .item-b {
  15.   grid-area: main;
  16. }
  17. .item-c {
  18.   grid-area: sidebar;
  19. }
  20. .item-d {
  21.   grid-area: footer;
  22. }

02.png

2.3 grid-template

grid-template-rows，grid-template-columns和grid-template-area的简写

  1. .container {
  2.   grid-template:
  3.     [row1-start] "header header header" 25px [row1-end]
  4.     [row2-start] "footer footer footer" 25px [row2-end]
  5.     / auto 50px auto;
  6. }

等价于

  1. .container {
  2.   grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  3.   grid-template-columns: auto 50px auto;
  4.   grid-template-areas: 
  5.     "header header header" 
  6.     "footer footer footer";
  7. }

2.4 grid-template-columns

grid-template-rows

  1. .container {
  2.   grid-template-columns: 100px 50px 100px;
  3.   grid-template-rows: 80px auto 80px; 
  4.   grid-column-gap: 10px;
  5.   grid-row-gap: 15px;
  6. }

03.png

2.5 grid-gap

grid-row-gap 和grid-column-gap的简写

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

2.6 justify-items

每个网格内items的横向布局

  1. .container {
  2.   justify-items: start | end | center | stretch;
  3. }

2.7 align-items

每个网格内items的垂直方向布局

  1. .container {
  2.   align-items: start | end | center | stretch;
  3. }

2.8 place-items

justify-items 和 align-items的简写：

  1. .container{
  2.     place-items: align-items justify-items ;
  3. }

2.9 justify-content

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

2.10 align-content

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

2.11 place-content

justify-content 和 align-content的简写

  1. .container{
  2.     place-items: align-content justify-content ;
  3. }

未列举完。。。。

3. Grid Items

3.1 grid-column-start

grid-column-end

grid-row-start

grid-row-end

  1. .item {
  2.   grid-column-start: <number> | <name> | span <number> | span <name> | auto;
  3.   grid-column-end: <number> | <name> | span <number> | span <name> | auto;
  4.   grid-row-start: <number> | <name> | span <number> | span <name> | auto;
  5.   grid-row-end: <number> | <name> | span <number> | span <name> | auto;
  6. }

例如

  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. }

04.png

例如

  1. .item-b {
  2.   grid-column-start: 1;
  3.   grid-column-end: span col4-start;
  4.   grid-row-start: 2;
  5.   grid-row-end: span 2;
  6. }

05.png

3.2 grid-column

grid-row

3.1的简写形式：

  1. .item {
  2.   grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  3.   grid-row: <start-line> / <end-line> | <start-line> / span <value>;
  4. }

3.3 grid-area

3.1 和 3.2 的简写

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

3.4 justify-self

  1. .item {
  2.   justify-self: start | end | center | stretch;
  3. }

3.5 align-self

  1. .item {
  2.   align-self: start | end | center | stretch;
  3. }

3.6 place-self

justify-self 和 align-self 的简写

  1. .item {
  2.     align-self justify-self;
  3. }