参考

外层容器display: grid，内层容器自动成为 grid 布局的元素

grid 布局即是网格布局, 控制的是网格线，像是利用那看不见的网格线布局元素

排列 grid-template-columns

设置 行 排列方式

.grid {
  display: grid;
  grid-template-columns: 100px 100px 100px;
}

使用 grid 自适应 浮动单位 fr

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

设置间距

column-gap 列间距； row-gap行间距； gap 同时设置行列间距

设置分格

grid-column: grid-column-start / grid-column-end

把元素限制在：grid-column-start 开始到 grid-column-end 结束的网格中

grid-column: 1 / 4;

grid-column: 2 / 3;

排版 grid-template-areas

// 父容器
grid-template-areas:
  "header header header"
  "sidebar coontent content"
  "footer footer footer"
  // 各个元素
  header {
  grid-area: header;
}
sidebar {
  grid-area: sidebar;
}
coontent {
  grid-area: coontent;
}
footer {
  grid-area: footer;
}

布局

单个网格块内元素的布局

align-items 控制垂直

justify-items 控制水平

.grid {
  align-items: end;
  justify-items: space-between;
}

对轨道进行布局

一般是行轨道和列轨道小于 grid 容器时， 就是 grid-template-columns 没有使用 fr 自适应时。

align-content 控制垂直

justify-content 控制水平

.grid {
  align-content: end;
  justify-content: center;
}