深入Grid布局

属性

display
- gird | inline-grid
grid-template-columns
- 列宽
- grid-template-colums:100px 200px 300px
  - 声明了 3 列，分别为 100px、200px、300px
grid-template-rows 行高
- grid-template-row:100px 200px
  - 声明了两行，分别为 100px 200px

repeat()函数
- grid-template-columns:repeat(3,100px) 等价于 grid-template-columns:100px 100px 100px
- auto-fill
  - 自动填充
  - 让一行或者是一列中尽可能的容纳更多的单元格
  - grid-template-columns:repeat(auto-fill,100px)
fr关键字
- fr 单位代表网格容器中可用空间的一等份
- grid-template-columns:200px 1fr 2fr
  - 表示第一个列宽设置为 200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3
minmax()函数
- minmax 函数产生一个长度范围
- grid-template-columns:1fr 2fr minmax(300px,2fr)
  - 表示第三个列宽最少是 300px，最大不能超过第一第二列宽的两倍
auto关键字
- grid-template-columns：100px auto 100px
  - 表示第一列和第三列宽为 100px 吗，中间自适应
grid-row-gap grid-column-gap grid-gap
- 分别设置行间距和列间距
- grid-gap：10px 20px
  - 行间距 10px，列间距 20px
grid-template-areas
- 用于指定区域，一个区域由一个或者多个单元格组成
- 与grid-area搭配使用
  - 指定项目放在哪一个区域

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 120px 120px 120px;
  /* 分成6个单元格，上下各3个，.代表空的单元格，header元素占两份 */
  grid-template-areas:
    ". header header"
    "sidebar content content";
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.header {
  grid-area: header;
}

grid-auto-flow
- 控制自动布局算法怎样运作，默认的放置顺序是“先行后列”
justify-items align-items place-items
- justify-items属性设置单元格内容的水平位置（左中右）
  - start | end | center |stretch（拉伸）
- align-items属性设置单元格的垂直位置（上中下）
  - start | end | center |stretch（拉伸）
justify-content align-content place-content
- justify-content属性设置整个内容区域在容器里面的水平位置（左中右）
  - start | end | center | strech | space-around |space-between | space-evenly
- align-content属性设置整个内容区域在容器里面的垂直位置（上中下）
  - start | end | center | strech | space-around |space-between | space-evenly
grid-auto-columns grid-auto-rows
- 隐式和显式网格
  - 显式网格包含了你在grid-template-columns和grid-template-rows属性中定义的行和列，如果在网格定义之外又放了一些东西，或者因为内容的数量而需要更多的网格轨道的时候，网格会在隐式网格中创建行和列
  - 假如有多余的网格（隐式网格），那么它的行高和列宽可以根据grid-auto-columns属性和grid-auto-rows属性设置，写法一致
grid-column-start grid-column-end grid-row-start grid-row-end
- 可以指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置
- grid-column-start 左边框所在的垂直网格线
- grid-column-end右边框所在的垂直网格线
- grid-row-start 上边框所在的垂直网格线
- grid-row-start 下边框所在的垂直网格线
justify-self align-self place-self （单个单元格）
- justify-self 属性设置单元格内容的水平位置（左中右）
- align-self 属性设置单元格内容的垂直位置（上中下）