Grid布局及相关属性

grid布局简介

• Grid（网格）布局，是一个二维的基于网络的布局系统

相关术语

• Grid容器 Grid Container

  设置了 display: gird 的元素

• Grid项目 Grid Item

  Grid容器的直接子元素

• 网格单元 Grid Cell

  有”单元格”和”网格区域”两种形式

• 网格轨道 Grid Track

  由多个单元格组成，根据排列的方向有”行轨”和”列轨”之分

• 轨道间距 gap

  容器中轨道之间的距离，有”行轨间距”和”列轨间距”

• fr

  grid 布局中类似于flex中的伸缩因子

• grid-auto-flow

  • row（默认值）：告诉自动布局算法依次填充每行，根据需要添加新行
  • column：告诉自动布局算法依次填充每列，根据需要添加新列

容器（grid container）的属性

• display属性

  • grid 生成一个块级(block)网格
  • inline-grid 生成一个行内级(inline)网格

• grid-template-columns/grid-template-rows 属性

  • grid-template-columns 定义列数及列宽

    grid-template-columns: 5em 5em 5em 三列，列宽5em

  • grid-template-rows 定义行数及行高

    grid-template-rows: 10em 10em 两行，行高10em

• gap属性

  • gap: 水平 垂直 gap:

    gap: 2em 3em 水平间距2em 垂直间距3em
    如果水平和垂直数值一样，可以简写 gap:2em

• fr 属性

  • grid-template-columns: 1fr 2fr 1fr;

    中间一列的宽度是二边的二倍

  • grid-template-columns: 20% 1fr 20%;

    总宽度减去百分比的宽度,将剩下的全部分给fr

  • fr 尽可能不要与 auto 同时使用

• repeat()函数

  • grid-template-columns: repeat(3, 1fr 2fr);

    展开形式：grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;

• minmax()函数

  • grid-template-columns: 1fr minmax(20em, 2fr) 1fr;

    中间列,最小宽度是20em,最大宽高是左右的2倍

Grid Item 项目属性

• grid-area 自定义项目在容器的显示位置

  • grid-area: 1 / 1 / 2 / 2;

    将项目放入到第一个网格单元中

  • grid-area: 1 / 1 / 3 / 4;

    项目跨越两行三列
    grid-area: 1 / 1 / span 2 / span 3; 用span更容易更直观
    grid-area: span 1 / span 3; 如果从当前位置跨行，起始行号可以省略