以下内容收集于阮一峰Grid 网格布局教程 (opens new window)

概念

• 容器和项目

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

• 行与列

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

• 单元格

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

• 网格线

水平网格线划分出行，垂直网格线划分出列，正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线

容器属性

值	描述
grid-template-columns	定义每一列的列宽
grid-template-rows	定义每一行的行高
row-gap	设置行间距
column-gap	设置列间距
gap	行与列间距合并写法
grid-template-areas	通过命名区域来定义网格容器中的布局
grid-auto-flow	控制网格项时的布局顺序和填充方式
justify-items	设置单元格内容的水平位置（左中右）
align-items	设置单元格内容的垂直位置（上中下）
place-items	是align-items属性和justify-items属性的合并简写形式
justify-content	内容区域在容器里面的水平位置
align-content	内容区域在容器里面的的垂直位置
place-content	align-content属性和justify-content属性的合并简写形式
grid-auto-columns	定义了当内容在显式定义的列之外生成新的列时，这些新列的大小
grid-auto-rows	定义了当内容在显式定义的行之外生成新的行时，这些新行的大小
grid-template	是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式
grid	是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式

grid-template-columns

.contaniner{
  grid-template-columns: 50px 50px 50px;    /* 3列每列50px */
  /* 接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值 */
  grid-template-columns: repeat(3, 33.33%); /* 3列每列33.33%,简化重复的值 */
  /* 重复某种模式 定义了6列，第一列和第四列的宽度为100px，第二列和第五列为20px，第三列和第六列为80px*/
  grid-template-columns: repeat(2, 100px 20px 80px);
  /* 单元格的大小是固定的，但是容器的大小不确定。auto-fill表示自动填充 */
  grid-template-columns: repeat(auto-fill, 100px);

  /* fr关键字（fraction 的缩写，意为"片段"）*/
  /* 1fr 2fr表示后者宽度是前者的2倍  */
  grid-template-columns: 1fr 2fr;
  /* 表示第一列的宽度为150像素，第二列的宽度是第三列的一半 */
  grid-template-columns: 150px 1fr 2fr;

  /* minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大 */
  /* 表示列宽不小于100px，不大于1fr */
  grid-template-columns: 1fr 1fr minmax(100px, 1fr); 

  /* auto关键字 */
  /* 表示由浏览器自己决定长度。 */
  grid-template-columns: 100px auto 100px;
  /* 设置网格线的名称 */
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
} 

grid-template-rows

参数和grid-template-columns一样

grid-row-gap和grid-column-gap和grid-gap

根据最新标准，上面三个属性名的grid-前缀已经删除，grid-column-gap和grid-row-gap写成column-gap和row-gap，grid-gap写成gap

.contaniner{
  grid-row-gap:10px;  /* 设置行间距 */  
  grid-column-gap:10px;  /* 设置列间距 */
  grid-gap:<grid-row-gap> <grid-column-gap>  /* grid-row-gap和grid-column-gap的合并简写形式 */
}

grid-template-areas

通过命名区域来定义网格容器中的布局

.contaniner{
  display: grid;
  grid-template-areas:
    'header header'
    'sidebar main'
    'footer footer';
}
.header {
  grid-area: header;
  background-color: lightblue;
}
.sidebar {
  grid-area: sidebar;
  background-color: lightgreen;
}
.main {
  grid-area: main;
  background-color: lightcoral;
}
.footer {
  grid-area: footer;
  background-color: lightgoldenrodyellow;
}

grid-auto-flow

控制网格项时的布局顺序和填充方式

属性值

• row (默认值)先从左到右，再从上到下
• column 先从上到下，再从左到右
• dense 紧密填充模式。无论行（row dense）还是列（column dense），在自动放置时，会尽可能紧凑地填充空闲的网格单元，从而避免空隙
• row dense
• column dense

justify-items

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

align-items

属性和justify-items一样

place-items

.contaniner{
    display: grid;
    place-items: <align-items> <justify-items>;
}

justify-content

属性	描述
start	内容从容器的起始位置开始排列
end	内容从容器的结束位置开始排列
center	内容在容器中居中对齐
stretch（默认值）	将子项拉伸以填满容器的空间 这个值通常不用于justify-content，更常见于align-items和align-self
space-around	内容项之间的间距相等
space-between	内容项与内容项的间隔相等
space-evenly	内容项与内容项的间隔相等，项目与容器边框之间也是同样长度的间隔

align-content

属性和justify-content一样

place-content

若省略第二个值，浏览器就会假定第二个值等于第一个值。

.contaniner{
    display: grid;
    place-content: <align-content> <justify-content>
}

项目属性

值	描述	值	描述
grid-column-start	左边框所在的垂直网格线	grid-column-end	右边框所在的垂直网格线
grid-row-start	上边框所在的水平网格线	grid-row-end	下边框所在的水平网格线
grid-column	是grid-column-start和grid-column-end的合并简写形式	grid-row	是grid-row-start属性和grid-row-end的合并简写形式
grid-area	指定项目放在哪一个区域	justify-self	单元格内容的水平位置（左中右）
align-self	单元格内容的垂直位置（上中下）	place-self	是align-self属性和justify-self属性的合并简写形式