Grid 布局学习

特殊之处

一下处理两个维度的布局。使用:grid大结构，flex细处理。

创建

display：grid(该容器是一个块级元素) 或 display：inline-grid(该容器是一个内联元素)

网络轨道

grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。
例一、

.wrapper {
  display: grid;
  /*  声明了三列，宽度分别为 200px 100px 200px */
  grid-template-columns: 200px 100px 200px;
  /*  声明了两行，行高分别为 50px 50px  */
  grid-template-rows: 50px 50px;
}

例二、

.wrapper-1 {
  display: grid;
  grid-template-columns: 200px 100px 200px;
  /*  2行，而且行高都为 50px  */
  grid-template-rows: repeat(2, 50px);
}

auto-fill关键字：表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格。例:grid-template-columns: repeat(auto-fill, 200px)
fr 关键字：Grid 布局还引入了一个另外的长度单位来帮助我们创建灵活的网格轨道。fr 单位代表网格容器中可用空间的一等份。grid-template-columns: 200px 1fr 2fr表示第一个列宽设置为 200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3。
auto 关键字：由浏览器决定长度。通过 auto 关键字，我们可以轻易实现三列或者两列布局。grid-template-columns: 100px auto 100px 表示第一第三列为 100px，中间由浏览器决定长度

间距

grid-row-gap 属性、grid-column-gap 属性以及 grid-gap 属性

justify-items

justify-items属性设置单元格内 内容 的水平位置（左中右）,
justify-content 属性设置 整个内容区域 在容器里面的水平位置（左中右），align-content属性是设置 整个内容区域 的垂直位置（上中下）

grid-column-start、grid-column-end、grid-row-start以及grid-row-end 属性

最强大的 CSS 布局 —— Grid 布局

参考

https://gridbyexample.com/examples/