最近学习了下网格布局方式Grid. 翻译整理如下.

Grid -- 父级容器

1.grid-template-columns 定义列 grid-template-rows 定义行

1.行列的格式

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

定义行列的时候可以给出具体的数值, 如果设置为auto,则会自动分配;

在此基础上, 你可以给行列进行命名(可以给出两个名字), 用中括号表示

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

如果定义了重复的部分, 可以使用repeat()进行简化

.container {
    grid-template-columns: repeat(3, 20px [col-start]) 5%;
}
相当于:
.container {
    grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
}

fr 为网格容器自由空间的一部分,举例说明:

.container {
    grid-template-columns: 1fr 1fr 1fr;
}
每个项目设置为容器宽度的三分之一

*************

.container {
    grid-template-columns: 1fr 50px 1fr 1fr;
}
1fr 项目占(容器宽度-50px)的三分之一

2. grid-template-areas

通过 grid-area 属性置顶网格区域的名称来定义网格模板, 重复网格区域的名称会导致内容跨越这些单元格(就是一个view占据多个单元格的位置)

< grid-area-name > 网格区域的名称
. 空格网格

none 没有定义的区域

.container {

   grid-template-areas: "<grid-area-name> | . | none | ..."
               "...";

}
例子: .item-a {

   grid-area: header;

} .item-b {

   grid-area: main;

} .item-c {

    grid-area: sidebar;

} .item-d {

   grid-area: footer;

}

.container {

     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";

}

布局对应的展示:

grid-template

一个声明里面设置grid-template-rows，grid-template-columns& grid-template-areas.

.container {
    grid-template:
        [row1-start] "header header header" 25px [row1-end]
        [row2-start] "footer footer footer" 25px [row2-end]
        / auto 50px auto;
}
相当于:
.container {
    grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
    grid-template-columns: auto 50px auto;
    grid-template-areas: 
          "header header header" 
          "footer footer footer";
}

由于grid-template不会重置隐式网格属性（grid-auto-columns，grid-auto-rows和grid-auto-flow），但是这可能是您在大多数情况下所要做的，所以建议使用grid属性而不是grid-template。

grid-column-gap & grid-row-gap

指定网格线的大小, 就是网格之间的间距

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}
有一种简短的写法, 相当于:
.container {
    grid-template-columns: 100px 50px 100px;
    grid-template-rows: 80px auto 80px; 
    grid-gap: 10px 15px;
}

展示效果如下:

justify-items

沿着行轴对其网格内的内容:

.container {
      justify-items: start;
}

.container {
      justify-items: center;
}

.container {
      justify-items: end;
}

.container {
    justify-items: stretch;
}

注: 可以通过justify-self设置个别网格项目属性;

align-items

沿着列轴对其网格内的内容:

.container {
    align-items: start;
}

.container {
  align-items: center;
}

.container {
  align-items: end;
}

.container {
  align-items: stretch;
}

justify-content

有时网格总大小可能小于网格容器的大小, 此时就需要设置容器内总的网格的对齐方式, 此属性沿着行轴对齐网格

.container {
    justify-content: start;
}

.container {
    justify-content: center;
}

.container {    
    justify-content: end;
}

.container {
    justify-content: stretch;
}

两头是中间的一半
.container {
    justify-content: space-around;
}

两头紧贴边缘
.container {
    justify-content: space-between;
}

间隙一样
.container {
    justify-content: space-evenly;    
}

align-content

有时网格总大小可能小于网格容器的大小, 此时就需要设置容器内总的网格的对齐方式, 此属性沿着列轴对齐网格

.container {
  align-content: start;    
}

.container {
  align-content: center;    
}

.container {
  align-content: end;    
}

.container {
  align-content: stretch;    
}

.container {
  align-content: space-around;    
}

.container {
  align-content: space-between;    
}

.container {
  align-content: space-evenly;    
}

grid-auto-columns & grid-auto-rows

指定自动生成的网格(又名隐式网格)大小, 如果定位的行或列超出定义的网格范围, 则会创建隐式网格

例子:

默认定义的网格如下

.container {
    grid-template-columns: 60px 60px;
    grid-template-rows: 90px 90px
}

如果定位了如下网格:

.item-a {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item-b {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

不设置隐式轨道的宽度的话, 会设置宽度为0的隐式轨道来填补空白,如下:

所以我们可以指定隐式轨道的宽度:

.container {
    grid-auto-columns: 60px;
}

展示效果如下:

grid-auto-flow

如果没有明确放置在网格上的网格项目布局, 则自动算法会自动放置这些项目. 该属性控制自动布局算法的工作原理

row - 按行依次排布
column - 按列依次排布
dense - 在网格中尽早填充剩余空格

举例说明:

定义了如下HTML:

<section class="container">
  <div class="item-a">item-a</div>
  <div class="item-b">item-b</div>
  <div class="item-c">item-c</div>
  <div class="item-d">item-d</div>
  <div class="item-e">item-e</div>
</section>

定义一个两行五列的网格, 并且设置grid-auto-flow为 row

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: row;
}

将item放置在其中两个指定点:

.item-a {
  grid-column: 1;
  grid-row: 1 / 3;
}
.item-e {
  grid-column: 5;
  grid-row: 1 / 3;
}

因为我们设置了grid-auto-flow为row, 网格将会按以下方式排布

当然. 如果设置了grid-auto-flow为column, 则会按下面的方式排布

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: row;
}

Grid -- 子级网格

grid-column-start & grid-column-end & grid-row-start & grid-row-end

通过特定的网格线来确定网格内网格的位置. grid-column-start/ grid-column-end是列的开始跟结束位置，grid-row-start/ grid-row-end是行开始跟结束的位置.

< line > 可以是数字也可以是名称来引用一个网格线
span< number > 项目所跨越的网格线的数量
span< name > 项目将跨越到的网格线的名称
auto 自动或默认跨度

例子如下:

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

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

如果没有grid-column-end / grid-row-end 声明, 该项目将跨越1个网格线

项目可以相互重叠。您可以使用它z-index来控制其堆叠顺序.

grid-column & grid-row

分别对应的为 start / end, 可接受number/name/span

.item-c {
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

grid-area

名称对应的区域

< row-start > / < column-start > / < row-end > / < column-end > , 可以是数字或者名称.

  .item-d {
      grid-area: header
  }
  .item-d {
      grid-area: 1 / col4-start / last-line / 6
  }

justify-self

沿着行轴对其网格内的内容

.item-a {
  justify-self: start;
}

.item-a {
  justify-self: center;
}

.item-a {
  justify-self: end;
}

.item-a {
  justify-self: stretch;
}

align-self

沿着列轴对其网格内的内容

.item-a {
  align-self: start;
}

.item-a {
  align-self: center;
}

.item-a {
  align-self: end;
}

.item-a {
  align-self: stretch;
}

原文 : Grid布局

第10节：Grid