Grid布局笔记grid grid是一个用于web的二维布局系统，利用display:grid可以将内容按照行、列进行排

grid

grid是一个用于web的二维布局系统，利用display:grid可以将内容按照行、列进行排布。

网格

一个网格包含行(column)、列(row)，以及行列之间的沟槽(gutter)组成。

grid-template-columns ｜ grid-template-rows

使用grid-template-rows和grid-template-columns设置行列

<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
</div>

.container {
  // 定义布局为grid，默认为1列
  display: grid;
  // 设置布局内元素为3列，每列元素宽度为200px
  grid-template-columns: 200px 200px 200px;
}

.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
}

fr

除了使用px等长度或百分比单位，可以使用fr灵活定义grid内元素的大小。fr表示grid容器内的可用空间的一份,使用fr可以按比例划分元素。 可用空间不包含已被确定占用的空间，例如: grid-template-columns: 300pc 1fr 1fr; 其中的两个fr元素是在300px占用后的可用空间内重新分配。

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

grid-gap | gap 间隙

grid-column-gap设置列间隙,grid-row-gap设置行间隙。grid-gap同时设置行列间隙.

间隙可以使用任何长度单位或者百分比，但是不能使用fr单位

.container {
  display:grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-gap: 20px;
}

repeat 重复构建宽度配置

.container {
  display:grid;
  grid-template-columns: repeat(2, 1fr 1fr); // 等同于 1fr 1fr 1fr 1fr
  grid-gap: 20px;
}

隐式网格

使用grid-template-column | grid-template-rows属性设置并生效的元素区域是显式网格，在显式网格之外的网格则是隐式网格，隐式网格默认参数为auto，根据内容自动调整，手动控制隐式网格大小可以通过grid-auto-columns | grid-auto-rows属性。

.container {
  display:grid;
  grid-template-columns: repeat(2,1fr);
  grid-template-rows: repeat(3, 100px);
  // 显示在第四行的元素 行高设置为200px
  grid-auto-rows: 200px;
  grid-gap: 20px;
}

基于分隔线放置元素

可以通过设置元素是从哪个分隔线开始到哪个分隔线结束的区间，来设置元素所占据的空间。

第一条线的起始点与文档书写模式相关。在英文中，第一条列分隔线（即网格边缘线）在网格的最左边而第一条行分隔线在网格的最上面。而对于阿拉伯语，第一条列分隔线在网格的最右边，因为阿拉伯文是从右往左书写的。

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

缩写属性，使用/分割线符，同时设置起始点

grid-column
grid-row

#water {
  // 元素空间为第一列分隔线到第四分隔线，即1到3列。
  grid-column-start: 1;
  grid-column-end: 4;
}

❌ grid-column-start < grid-column-end（start的值并不一定需要小于end）

#water {
  // 元素空间为第5分隔线到第2分隔线，即第4到第2列。
  grid-column-start: 5;
  grid-column-end: 2;
}

😉 使用负数，表示倒数第几条分隔线

你也可以用 -1 来定位到最后一条列分隔线或是行分隔线，并且可以用负数来指定倒数的某一条分隔线。但是这只能用于显式网格，对于隐式网格-1不一定能定位到最后一条分隔线。

#water {
  // 第1到第4列。
  grid-column-start: 1;
  grid-column-end: -2;
  // grid-column-start: -3; 从倒数第3列开始，倒数相对于第一条分隔符
}

🙃 使用span，根据列宽定义网格,只适用正值

#water {
  // 从第2条分隔线开始，占据两个列宽，即第2到3列
  grid-column-start: 2;
  grid-column-end: span 2;
  
  // 占据三个列宽，到第5条分隔线结束，即第2到4列。
  grid-column-start: span 3;
  grid-column-end: 5;
}

😇 缩写，grid-column

#water {
  // 第4到5列
  grid-column: 4 / 6;
  // 结合span  第2到4列
  grid-column: 2 / span 3;
}

😒 简写，grid-area，类似于margin，表示对于 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end的简写

Grid布局笔记