Html-格子布局(Grid)

• 前情提要： 只写了关键代码
• 示例布局： html/GTA5 封面.html

划分行列

1. grid-template-columns 划分列数

   • 划几个就写几个值，每个值代表该列的宽

2. grid-template-rows 划分行数

   • 划几个就写几个值，每个值代表该行的高

3. 重复设置(repeat())

   • 参数一： 重复的数量
   • 参数二： 重复的值,这个值可以有多个，用空格连接
     • 示例： grid-template-columns:repeat(2, 100px 50px)

4. 自动填充auto-fit

   • 根据容器尺寸，自动设置元素尺寸
   • 示例： grid-template-columns: repeat(auto-fit,100px)

5. 比例划分

   • 单位组合
     • 使用 fr 单位设置元素在空间中所占的比例
   • 重复定义
     • 结合 repeat

6. 自动空间 auto

• 在值中使用 auto，则将获取剩余空间

7. 组合定义

   • grid-template: grid-template-rows / grid-template-columns
     • 示例： grid-template: 50px 100px 50px / 150px 150px
   • grid-template: grid-template-areas
     • 示例：

/*点代表占位符*/
grid-template:
  'header header .'100px
  '. main main'200px
  'footer . .' 300px;

div:nth-child(1) {
  grid-area: header
}
div:nth-child(2) {
  grid-area: main
}
div:nth-child(3) {
  grid-area: footer
}

8. 最大最下值 minmax()

   • 取值范围在最小到最大之间取值，左边最小，右边最大
   • 示例：grid-template-columns: repeat(2,minmax(100px, 1fr))

间距定义

1. 行间距：row-gap
2. 列间距：column-gap
3. 组合定义：gap
   • 一个值：行列统一
   • 两个值：行 列

元素定位

1. grid-row-start: 行开始网格线，起到命名的作用
2. grid-row-end: 行结束网格线
3. grid-column-start：列开始网格线
4. grid-column-end：列结束网格线

• 以上共有属性：
  • Line: 网格络
  • span数值： 网格包含的网格数量
  • span 区域名称： 网格包含到指定的区域名称
  • auto： 自动设置，默认为一个网格宽高

5. 根据网格线

   • 通过设置具体的第几条网格线来设置区域位置，设置的数值可以是正数和负数

6. 根据偏移量 span

   • 使用 span 可以设置包含网格的数量或包含到的区域名称。
   • 示例：grid-row-start: span 2;

7. 根据网格命名：看下面的网格命名小节

8. 简写模式

   • 使用grid-row设置行开始网格线
   • 使用设置grid-column列结束网格线

9. 更简洁的组合写法： grid-area: grid-row/start/grid-column-start/grid-row-end/grid-column-end

10. 实现类似于 bootstrap 的布局

网格命名

• 独立命名

/*2. 然后在定义行列宽时也添加进去*/
.outer {
  grid-template-columns: [c1-start] 100px [c1-end c2-start] 100px [c3-end];
  grid-template-rows: [r1-start] 100px [r1-end r2-start] 100px [r3-end];
}
/*1.给一个网格中的每个线单独命名*/
.div1 {
  grid-row-start: r2-start;
  grid-row-end: r2-end;
  grid-column-start: c3-start;
  grid-column-end: c3-end;
}

• 自动命名

/*2. 然后在定义行列宽时也添加进去*/
.outer {
  grid-template-columns: repeat(3,[c-start] 100px [c-end]);
  grid-template-rows: repeat(3,[r-start] 100px [r-end]);
}
/*1.给一个网格中的每个线单独命名*/
.div1 {
  grid-row-start: r-start 2;
  grid-row-end: r-end 2;
  grid-column-start: c-start 2;
  grid-column-end: c-end 2;
}

区域换位

1. 编号定位

/*2. 然后在定义行列宽时也添加进去*/
.outer {
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
}
/*1.给一个网格中的每个线单独命名*/
.div1 {
  grid-area:2/2/3/3;
}

2. 命名定位

/*2. 然后在定义行列宽时也添加进去*/
.outer {
  grid-template-columns: repeat(auto-fill, [c] 100px);
  grid-template-rows: repeat(auto-fill, [r] 100px);
}
/*1.给一个网格中的每个线单独命名*/
.div1 {
  grid-area:r 2 / c 2 / r 3 / c 3;
}

区域声明

• 以布局移动端页面结构为列

1. 区域布局

   • 每个子元素添加对应的 grid-area： 子元素的命名;
   • 在父元素中使用

  grid-template-rows: 80px 1fr 50px;
  grid-template-columns: 100px 1fr 50px 60px;
  grid-template-areas:
      "ddd ddd ddd ddd"
      "aaa bbb bbb ccc"
      "eee eee eee eee";
其中每个aaa，bbb,ccc,ddd,eee,代表了子元素的命名，命名放在哪里就代表子元素占用的位置

2. 简写形式

   • 每个子元素添加对应的 grid-area： 栅格名称;
   • 在父元素中使用

grid-template:
  '栅格名称 栅格名称 栅格名称 栅格名称' 行高
  '栅格名称 栅格名称 栅格名称 栅格名称' 行高
  '栅格名称 栅格名称 栅格名称 栅格名称' 行高/列宽 列宽 列宽 列宽;

3. 区域命名(系统自动命名)

   • 只要子元素命名了网格线的区域，栅格名字自定生成
     • 示例:grid-area: header1-start/header1-start/main-end/mian-end

4. 区域占位

   • 使用一个或多个.来占位，一个.,代表一个位置

网格流动

1. grid-auto-flow 改变单元格排列方式

   • column： 按列排序
   • row： 按行排序
   • dense： 元素使用前面空余栅格(想当与 margin)

2. 在父元素使用

3. 强制填充

   • 当元素在栅格中放不下时，将会发生换行产生留白，使用grid-auto-flow: row dense;
     可以执行填充空白区域操作

对齐管理

• justify-content: 所有栅格在容器中的水平对齐方式，容器有额外空间时
• align-content：所有栅格在容器中的垂直对齐方式，容器有额外空间时
• align-items: 栅格内所有元素的垂直排列方式
• justify-items: 栅格内所有元素的横向排列方式
• align-self: 元素在栅格中垂直对齐方式
• justify-self: 元素在栅格中水平对齐方式

1. 网格对齐

   • justify-content 属性的值如下

值	说明
start	容器左边
end	容器右边
center	容器中间
stretch	撑满容器
space-between	第一个栅格靠左边，最后一个栅格靠右边，余下元素平均分配空间
space-around	每个元素两侧的间隔相等。所以，栅格之间的间隔比栅格与容器边距的间隔大一倍 space-evenly 栅格间距离完全平均分配

• align-content 属性的值如下

值	说明
start	容器顶边
end	容器底边
center	容器垂直中间
stretch	撑满容器
space-between	第一个栅格靠左边，最后一个栅格靠右边，余下元素平均分配空间
space-around	每个元素两侧的间隔相等。所以，栅格之间的间隔比栅格与容器边距的间隔大一倍
space-evenly	栅格间距离完全平均分配

2. 元素对齐

   • justify-items 用于控制元素的水平对齐方式，可用的属性值如下

值	说明
start	元素对齐栅格的左边
end	元素对齐栅格的右边
center	元素对齐栅格的中间
stretch	水平撑满栅格

• align-items 用于控制元素的垂直对齐方式，可用的属性值如下

值	说明
start	元素对齐栅格的顶边
end	元素对齐栅格的底边
center	元素对齐栅格的垂直中间
stretch	垂直撑满栅格

1. 简写

• place-content: <align-content> <justify-content>
• place-items: <align-items> <justify-items>
• place-self: <align-self> <justify-self>

自动排列

1. 属性说明

• grid-auto-rows: 控制自动增加的栅格行的尺寸，grid-auto-flow:row; 为默认
• grid-auto-columns: 控制自动增加的栅格列的尺寸，grid-auto-flow: column;