网格布局
- 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
网格的间距
- 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
排序
- 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: 简写