网格布局

table    ----------------->   div + float        ------------------------->        position   [放大缩小 错位]   -----------> inline

FlexBox（一维布局）  --------------> grid(二维布局)

 

盒模型  content   padding   border  margin 

 网格布局术语 ：

网格容器： 所有网格项的父元素

网格项： 网格容器的子元素

网格线： 组成网格项的分界线 （虚拟概念）

网格轨道： 相邻的两个网格线之间是网格轨道

网格单元： 区别与网格项 【在html中可以找到的实体内容】 由网格线划分成的单元格

网格区域： 四个网格线组成的总空间

fr(单位)：剩余空间分配数，用于在一系列长度值中分配剩余空间，如果是多个部分，则剩余空间按照数字比例分配

gr(网格数)

grid    inline-grid    subgrid (浏览器不兼容)

display: grid   对自己的子元素约定显示规则（孙节点不受约束）

 

grid-template-colunms:  列宽度

grid-template-rows:  行高度

网格容器  高度不定  auto 就会尽可能缩小

高度一定，auto就会平分网格容器高度

grid-template 定义网格线名称： 

 

grid-template-areas  网格区域

网格线的大

grid-column-gap

grid-row-gap

可以简写为：

grid-gap :  grid-row-gap   grid-column-gap

可以简写为：

gap

justify-items: 行轴  水平对齐  

align-items： 列轴  垂直居中

可以简写为

place-items:  列轴   行轴

content对齐:  

justify-content

place-content : 列轴   行轴

 

grid-auto

grid的简写形式：

areas   columns  rows   

css函数

repeat(5, 1fr)   重复某行  或者是   某列 

fit-content(300px)  如果内容小于300  则多余出的显示为空隙    若大于300 则显示300px

minmax()    

start - end : 网格项上的属性   网格线的划分

grid-row-start  , grid-row-end  grid-column-start  grid-column-end

grid-area 

self  自己控制

不同的区域  可以使用  z-index 来控制区域的层叠顺序

start  与 end 的简写

grid-column:2 / 4;  span  可以跨行

grid-area: row1-start/2/3/five  row start/ col start / row end / col end /

self :  设置自己的属性   

justify-self   行轴对齐  align-self