grid 布局

什么是grid布局

• grid布局即是网格布局
• grid 布局是一个二维布局

容器属性介绍

display

• display：grid 则该容器是一个块级元素
• display: inline-grid 则容器元素为行内元素

.container {
    display: grid | inline-grid;
}

grid-template-columns 和 grid-template-rows

1. grid-template-columns 设置列宽
2. grid-template-rows 设置行高
3. repeat() 函数：可以简化重复的值。该函数接受两个参数

• 第一个参数是重复的次数
• 第二个参数是所要重复的值

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

• auto-fill 关键字：表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

• fr 关键字: 网格容器中可用空间的一等份

.container {
  display: grid;
  /* 第一个列宽设置为 200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3 */
  grid-template-columns: 200px 1fr 2fr; 
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

grid-auto-flow

• grid-auto-flow 属性控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。
• 默认值是 row，先行后列，即先填满第一行，再开始放入第二行
• grid-auto-flow: row dense，表示尽可能填满表格

.container {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-auto-flow: row;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

grid-auto-columns 和 grid-auto-rows

• 显式网格：包含了你在 grid-template-columns 和 grid-template-rows 属性中定义的行和列。
• 隐式网格：超出显示网格设置的项目，使用grid-auto-columns 属性和 grid-auto-rows 属性设置

.container {
  display: grid;
  grid-template-columns: 200px 100px;
/*  只设置了两行，但实际的数量会超出两行，超出的行高会以 grid-auto-rows 算 */
  grid-template-rows: 100px 100px;
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}

justify-items 和 align-items

• justify-item 设置单元格内容的水平位置（左中右）
• align-items 设置单元格的垂直位置（上中下）

.container {
  justify-items: start | end | center | stretch;
}

.container {
  align-items: start | end | center | stretch;
}

grid-gap, grid-row-gap, grid-column-gap

• grid-row-gap 设置行间距
• grid-column-gap 设置列间距
• grid-gap 设置行间距和列间距的简写

.container {
  display: grid;
  grid-template-columns: 200px 100px 100px;
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}

项目属性介绍

grid-column-start, grid-column-end, grid-row-start, grid-row-end

• grid-column-start 属性：左边框所在的垂直网格线
• grid-column-end 属性：右边框所在的垂直网格线
• grid-row-start 属性：上边框所在的水平网格线
• grid-row-end 属性：下边框所在的水平网格线

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  grid-auto-rows: minmax(100px, auto);
}

.one {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
  background: #f00; 
}

.two {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  background: #999;
}

grid-area

• grid-area 属性指定项目放在哪一个区域, 配置grid-template-columns使用

<div class="wrapper">
  <div class="header"></div>
  <div class="sidebar"></div>
  <div class="content"></div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(120px, 3);
  grid-template-areas: 
  "header header header"
  "sidebar content content";
  background-color: #fff;
  color: #444;
}

.siderbar {
  grid-area: "sidebar",
}

.header {
  grid-area: "header"
}

.content {
  grid-area: "content";
}

justify-self 属性、align-self 属性以及 place-self 属性

• justify-self: 单元格内容的水平位置（左中右）， 用于单个项目
• align-self: 单元格内容的垂直位置（上中下），用于单个项目
• place-self: align-self和justify-self的简写，用于单个项目

.item {
  justify-self: start | center | end | stretch;
  align-self: start | center | end | stretch;
}

.item-1 {
  justify-self: start;
}

.item-2 {
  justify-self: center;
}

.item-3 {
  justify-self: end;
}