网格布局学习笔记

学习来源 阮一峰，css grid布局教程

基本概念

容器和项目

采用网格布局的区域，成为容器。容器内部采用定位的子元素成为项目

行和列

容器水平区域称为行，垂直区域称为列

单元格

行和列交叉处称为单元格

网格线

划分网格的线称为网格线。水平网格线划分出行，垂直网格线划分出列

容器属性

• display: grid/inline-grid; 使元素内部采用网格布局

注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

• grid- template-columns: [name] value ; 定义每一列的列宽 [name] 可选
• grid- template-rows: [name] value ; 定义每一列的行宽 [name] 可选
• grid- row-gap： 行间距
• grid- column-gap： 列间距
• grid- gap: <grid-row-gap> <grid-column-gap>
• grid- template-areas: 网格布局允许指定”区域”, 此属性先划分单元格并命名。 写法如下
  ‘a b c’
  ‘d e f’
  ‘g . i’

. 表示不需要利用得单元格
注意，区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end。

• grid-auto-flow : row / column [dense]; 单元格排列顺序 dense 使单元格尽可能紧密
• justify-items ：start | end | center | stretch拉伸; 单元格内容得水平位置
• align-items ：start | end | center | stretch拉伸; 单位格内容得垂直位置
• place-items: <align-items> <justify-items>
• 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: <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

辅助值

• repeat(n / auto-fit, value) 函数; 方便重复每一列得值, auto-fit:自动填充
• fr: 比例单位 表示每行或列占用得相应其他列得倍数
• minmax(a, b)函数： 产生一个长度范围
• auto : 浏览器自己决定长度

项目属性

• grid-column-start 左边框所在的垂直网格线 值可以为 数字 或名字-start/end
• grid-column-end 右边框所在的垂直网格线 也可以用 span 2 表示跨越2个单元格
• grid-row-start 上边框所在的水平网格线
• grid-row-end 下边框所在的水平网格线
• grid-row 简写 用 / 分割
• grid-column 简写 用 / 分割
• grid-area ：指定本单元格应该放到哪个区域 也可以作为上边的简写形式集合
• justify-self ： 单元格内水平位置
• align-self： 单元格内垂直位置
• place-self: 简写