Grid布局

01  简介

Grid 布局是 CSS 中最强大的布局方案，它将网页划分成一一个个网格,可以任意组合不同的网格，做出各种各样的布局。

与 flex 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。

Grid属性分为两类，一类作用于grid容器，一类作用于grid子项目上

属性繁多，按需选用

---

参考：CSS Grid 布局完全指南(图解 Grid 详细教程)

https://www.html.cn/archives/8510#prop-grid-template-columns-rows

---

02  网格容器（Grid Container）的属性

display
grid-template-columns
grid-template-rows
grid-template-areas
grid-template
grid-column-gap
grid-row-gap
grid-gap
justify-items
align-items
place-items
justify-content
align-content
place-content
grid-auto-columns
grid-auto-rows

网格项(Grid Items) 属性

grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column
grid-row
grid-area
justify-self
align-self
place-self

网格线（Grid Line）

组成网格线的分界线。它们可以是列网格线（column grid lines），也可以是行网格线（row grid lines）并且居于行或列的任意一侧。

网格轨道（Grid Track）

两个相邻的网格线之间为网格轨道,可以认为它们是网格的列或行

网格单元（Grid Cell）

两个相邻的列网格线和两个相邻的行网格线组成的是网格单元，它是最小的网格单元

网格区（Grid Area）

网格区是由任意数量网格单元组成

---

03  容器中的属性

• display属性 将元素定义为网格容器，并为其内容建立新的 网格格式上下文

 

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

//grid ：生成一个块级网格
//inline-grid ：生成一个内联网格
//subgrid：如果网格容器本身是网格项（嵌套网格容器），此属性用来继承其父网格容器的列、行大小

---

• grid-template属性

（1）使用以空格分隔的多个值来定义网格的列和行

此属性用在容器（container）上面

.container {
  grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
  grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}
// track-size： 可以使用css长度（px、em等）、百分比、或用分数（用 fr 单位）
//line-name：可以选择任何名字

（2）grid-template-areas

通过引用 grid-area 属性指定的 网格区域(Grid Area) 名称来定义网格模板

.container {
  grid-template-areas: none|
    "grid-area-name|. grid-area-name|. grid-area-name|. ..."
    "grid-area-name|. grid-area-name|. grid-area-name|. ..."
    "......";
}
//grid-area-nameÿ