css基础：grid 记录

grid 总是云里雾里，手写梳理一下

Grid 布局

采用网格布局的区域，称为”容器”（container）。容器内部采用网格定位的子元素，称为”项目”（item）。

<div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

容器里面的水平区域称为”行”（row），垂直区域称为”列”（column）。

行和列的交叉区域，称为”单元格”（cell）。

划分网格的线，称为”网格线”（grid line）。水平网格线划分出行，垂直网格线划分出列。

容器属性

• display

设置为 grid

div {
  display: grid;
  display: inline-grid; // 可以设置为行内元素
}

• grid-template-columns 和 grid-template-rows

分别指定列数和列宽，行数和行高。

<div class="container"></div>
<style>
  .container {
    display: grid;
    grid-template-columns: 50px 20px;
    grid-template-rows: 100px 40px 100px;
  }
</style>

也可以使用百分比，如果较为重复，可以缩写为 repeat:

<div class="container"></div>
<style>
  .container {
    display: grid;
    width: 300px;
    height: 300px;
    grid-template-columns: repeat(2, 10% 20%); // 重复两次 ‘10% 20%’
    grid-template-rows: repeat(3, 10% 20%);
  }
</style>

有时，单元格的大小是固定的，但是容器的大小不确定。用 auto-fill 摆放，直到摆不下：

<div class="container"></div>
<style>
  .container {
    display: grid;
    width: 300px;
    height: 300px;
    grid-template-columns: repeat(auto-fill, 40px);
    grid-template-rows: repeat(auto-fill, 100px);
  }
</style>

为了方便表示比例关系，网格布局提供了 fr 关键字（fraction 的缩写，意为”片段”）。

<div class="container"></div>
<style>
  .container {
    display: grid;
    width: 300px;
    height: 300px;
    grid-template-columns: 1fr 2fr 40px;
    grid-template-rows: 2fr 1fr;
  }
</style>

常见的左右固定，中间自适应布局，可以用 auto

grid-template-columns: 100px auto 100px;

• row-gap 属性，column-gap 属性，gap 属性

顾名思义，分别是行的间距，列的间距，以及简写。

• grid-template-areas

这是一个很吊的属性，可以用来指定单元格名称，并且用来合并单元格，

grid-template-areas 为每个单元格命名，子元素用 grid-area 指定所属，把单元格划分的明明白白的：

<div class="container">
  <div style="grid-area: b; background: rebeccapurple">b</div>
  <div style="grid-area: c; background: red">c</div>
  <div style="grid-area: a; background: greenyellow">a</div>
</div>
<style>
  .container {
    display: grid;
    width: 300px;
    height: 300px;
    grid-template-areas:
      'b b a'
      'b b c'
      'b b c';
  }
</style>

• grid-auto-flow

表示从横向开始填充（row）还是纵向开始填充（column）
当设置为 row dense / column dense 时， 如果有空位，会用后面可以容纳的下的项目去填充

如图，2 已经摆不下了，换了一行：

设置 row dense，发现 3 的尺寸刚好，便会用 3 来填充空虚：

• justify-items 属性，align-items 属性，place-items 属性

注意：设置的是单元格里的内容

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

start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。

• justify-content 属性，align-content 属性，place-content 属性

注意：设置的是单元格本身

.container {
  justify-content: start | end | center | stretch | space-around | space-between
    | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between |
    space-evenly;
  place-content: justify-content | align-content;
}

项目属性

• grid-column-start 属性，grid-column-end 属性，grid-row-start 属性，grid-row-end 属性

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

注意：网格线是从 1 开始，而不是 0

<div class="container">
  <div class="first">葡萄地</div>
  <div>西瓜地</div>
  <div>番茄地</div>
</div>
<style>
  .container {
    display: grid;
    width: 300px;
    height: 300px;
    grid-template-columns: 100px 80px;
    grid-template-rows: 100px 40px 100px;
  }
  .first {
    grid-column-start: 1; // 等同于 grid-column: 1 4; 也等同于 grid-column-start：span 3;
    grid-column-end: 4;
    background: purple;
    color: #fff;
  }
</style>

• justify-self 属性，align-self 属性，place-self 属性

与 justify-items 属性，align-items 属性，place-items 属性完全一样，但只作用于本身