grid布局

网格布局

• flex 布局是轴线布局 只能指定项目针对轴线的位置 一维布局 grid 布局 将容器 划分为行和列 产生单元格 指定项目所在的单元格 二维布局

基本概念

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

容器属性

display:grid; 指定一个容器采用网格布局 display:inline-grid;
grid-template-colunms: 定义每一列的宽 取值 100px 200px 300px 25% 25% 25% 25% grid-template-rows: 定义每一行的高 100px 200px 300px
repeat(重复的次数,重复的值)函数

repeat(重复的次数，重复的模式)

grid-template-columns: repeat(auto-fill,50px)

grid-template-rows: 33.3% 33.3% 33.3% 33.3%

auto-fill:自动填充 关键字

fr 关键字 fraction 部分 片段 类比于 flex 1

minmax( ,) 最小不能小于多少 最大不能大于多少

grid-template-rows: 1fr 1fr minmax(100px,200px) 其他的行自适应

最后一行 最小不能小于 100px 最大不能大于 200px

auto关键字 浏览器决定长度 （）

grid-template-rows: 1fr auto 1fr

当元素设置为grid布局后 项目（子元素）flaot ,display:inline-block,display:table-cell,certical-align,
column-*

• 网格线的名称 [名称]

 grid-template-columns： [c1] fr [c2]fr [c3]fr
  grid-template-rows: [a1] fr [a2]fr [a3]fr
1
2

网格的间距

• grid-row-gap: 行间距
• grid-column-gap: 列间距
• grid-gap : 行间距 替用了上面
• column-gao: 列间距

区域

• grid-te,plate-areas: 定义区域

 grid-te,plate-areas：'a b c'
 					  'd e f'  分为9个区域
 					  'g h i'
 用不到的区域 使用 . 表示
 	一旦定义区域名 网格线名自动名 区域名 -start   区域名-end					  
1
2
3
4
5

排序

• grid-auto-flow 默认先行后列
  row(默认值) | column | row dense | colum dense(密集)

对齐方式(项目)

• Justify-items：设置单元格内容的水平位置
• align-items 设置单元格垂直位置
  - start | end | center | stretch
• align-items: 设置单元格内容的垂直位置
• justify-items: 设置单元格内容的水平位置
  - place-items：设置单元格 （align-items:和justify-items 简写）

对齐方式（整个内容）

• justify-content : 整个内容区域在容器中的水平位置

  • start | end | center| streatch | space-between | space-around | space-evenly

• align-content 整个内容区域在容器中的垂直位置

• place-content: 简写