最强大的CSS布局 -- grid

Grid布局是CSS中一种强大的二维布局系统，允许我们创建复杂的网格结构

Grid布局基础概念

Grid容器（Container）：应用display: grid的元素
Grid项目（Item）：Grid容器的直接子元素,不包括项目的子元素，Grid 布局只对项目生效
Grid线（Line）：构成网格结构的分界线，水平网格线划分出行，垂直网格线划分出列，正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线
Grid单元格（Cell）：网格中的最小单位
Grid轨道（Track）：两条相邻网格线之间的空间
Grid区域（Area）：由四条网格线包围的矩形区域

主要API及用法

容器属性

display: grid | inline-grid : 定义一个网格容器

grid-template-columns 和 grid-template-rows: 定义列和行的尺寸

绝对单位：px,em,rem,vw,vh,%

css

.container {
  grid-template-columns: 100px 100px 100px;  /* 3列，每列宽度为100px */
  grid-template-columns: 33.33% 33.33% 33.33%; /*使用百分比 */
}

repeat(): 使用repeat()函数，简化重复的值

css

.container {
  grid-template-columns: repeat(3, 33.33%);/*使用repeat函数，重复3次，每项宽度为33.33% */
  grid-template-columns: repeat(2, 100px 20px 80px) /*定义了6列，第一列和第四列的宽度为100px，第二列和第五列为20px，第三列和第六列为80px*/
}

auto-fill和auto-fit关键字: 自动填充，根据容器的尺寸自动填充只有当容器足够宽，可以在一行容纳所有单元格，并且单元格宽度不固定的时候，才会有行为差异

auto-fill会用空格子填满剩余宽度
auto-fit则会尽量扩大单元格的宽度

css

.container {
  grid-template-columns: repeat(auto-fill, 100px) /* 表示每列宽度100px，然后自动填充，直到容器不能放置更多的列 */
}

fr 关键字: 表示比例关系

css

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr; /* 表示第一列宽度为150px，第二列宽度为剩余宽度的1/3，第三列宽度为剩余宽度的2/3 */
}

minmax(): 产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

css

.container {
  grid-template-columns: 1fr 1fr minmax(100px, 1fr);  /* minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。*/
}

auto 关键字: 表示由浏览器自己决定长度。

css

.container {
  grid-template-columns: 100px auto 100px; /* 第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度。 */
}

网格线的名称: 可以使用方括号，指定每一根网格线的名字，方便以后的引用。

css

/* 指定网格布局为3行 x 3列，因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。 */
.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

grid-template-areas: 定义网格区域(如果某些区域不需要利用，则使用"点"（.）表示。)

css

.container {
  grid-template-areas: 
    "header header header"   
    "sidebar main main"
    "footer footer footer";
}

grid-gap, column-gap, row-gap : 定义网格之间的间隔

css

.container {
  grid-gap: 10px 20px; /* 行间隙 列间隙 */
}

justify-items 和 align-items : 设置网格项目在单元格内的水平和垂直对齐方式

css

.container {
  justify-items: center;
  align-items: center;
}

justify-content 和 align-content : 当网格总大小小于容器时，设置网格在容器中的对齐方式

css

.container {
  justify-content: space-between;
  align-content: center;
}

项目属性

grid-column 和 grid-row : 指定项目的位置和跨度

css

.item {
  grid-column: 1 / 3; /* 从第1条列线到第3条列线 */
  grid-row: 2 / 4; /* 从第2条行线到第4条行线 */
}

grid-area : 指定项目放置在哪个网格区域

css

.item {
  grid-area: header;
}

justify-self 和 align-self : 设置单个网格项目在单元格内的对齐方式

css

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

Grid布局基础概念 ​

主要API及用法 ​

容器属性 ​

项目属性 ​

Grid布局基础概念

主要API及用法

容器属性

项目属性