前端 css 经典：grid 栅格布局

前言：flex 是一维布局、grid 是二维布局

1. 容器属性

.container {
  width: 500px;
  height: 500px;
  /* 容器的类型为块元素grid还是行内元素inline-grid */
  display: grid;
  border: 1px solid;

  /* 设置列和列宽：auto-fill，屏幕每行容纳最多的200px的盒子 */
  grid-template-columns: repeat(auto-fill, 200px);
  /* fr：剩余空间平均后的一等分 */
  /* grid-template-columns: 200px 1fr 2fr 3fr; */
  /* minmax：最大和最小尺寸，如下 最小300px，最大2fr */
  /* grid-template-columns: 1fr 1fr minmax(300px, 2fr) */
  /* auto：宽度自适应 */
  /* grid-template-columns: 100px auto 100px; */

  /* 设置 行间距 列间距 */
  grid-gap: 10px 20px;

  /* 设置行高：设置每列高度都为200px */
  grid-auto-rows: 200px;
  /* 单独设置每列的行高 */
  /* grid-template-rows: 100px 200px; */

  /* 设置区域命名，同子项目里的grid-area使用 */
  grid-template-areas:
    ". header header"
    "sidebar content content";
  // header子项目占了两份
  .header {
    grid-area: header;
  }

  // 单元格内容水平位置
  justify-items: start | end | center | stretch;
  // 单元格内容垂直位置
  align-items: start | end | center | stretch;

  // 整个内容区域在容器里面的水平位置
  justify-content: start | end | center | stretch | space-around | space-between
    | space-evenly;
  // 整个内容区域的垂直位置
  align-content: start | end | center | stretch | space-around | space-between |
    space-evenly;
}

2. 项目属性

.child {
  // 可以指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;

  // 单元格内容的水平、垂直位置，同justify-items、align-items只作用于单个项目
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}