grid属性整理

作用于            代码块                    说明

container            display: grid                网格布局, item项为 块级元素
container            display: inline-grid                网格布局, item项为 行内快元素
container            grid-template-columns: 100px 100px 100px;    item项分三列, 每列 100px
container            grid-template-rows: 100px 100px 100px;        item项分三行, 每行 100px
css 值            repeat(count , value)                重复某一片段, 可以是多个
css 属性            auto-fill                    自动填充, 结合repeat使用
css 属性            fr                    等同于 1 个 flex值;  <=>  flex: 1;可以和px混用
css 属性            minmax(min, max)                限制 css 属性宽高的 最小值和最大值, 等同于 min-width 加上 max-width, 可混用
css 属性            auto                    让浏览器自动计算宽度/高度
container            grid-template-columns: [a] 100px [b] 100px [c];    网格线的名称, 两个盒子, 三条竖向的线, 名称分别为 a, b, c

container            grid-row-gap: 10px;                列间距10px
container            grid-column-gap: 10px;            行间距10px
container            grid-gap;                    上面两个属性的简写, 写一个默认两个值都是一样的
container            grid-template-areas: 'a b c'            定义区域名称, 六个区域, 分别为a ~ f 区域
                    'd e f';            不需要的区域可以用 . 表示
container            grid-auto-flow: column;            等同于flex改变轴排列方式
container            grid-auto-flow: row dense;            某些项目固定位置后, 其他项目的布局方式

item            justify-items:  start | center |end | stretch;        子项水平方向的排列方式
item            align-items:                子项垂直方向的排列方式
item            place-items: center center;            上面两个属性的简写形式(先垂直后水平)

container            justify-content: start;                设置子容器的对齐方式
container            align-content: (值等同于flex的align-item)        
container            space-content:                上面两个属性的简写形式

container            grid-auto-rows 同 grid-template-rows        设置超出container网格外的盒子的宽度
container            grid-auto-columns                高度

item            grid-column-start 属性，            通过限定网格的边线( 或者网格的名字 )来确定网格的占位( 数字 )
item            grid-column-end 属性，            也可以通过span 2 关键字指定跨越几个单元格长度
item            grid-row-start 属性，
item            grid-row-end 属性
item            grid-column gird-row            上面两个属性的简写, 中间用 / 分割, 比较特殊

item            grid-area: a;                指定内容放在哪个区间
item            justify-self: start end center stretch        指定自身元素的排列顺序 左右方向
item            align-self                    垂直方向
item            place-self                    上面两个属性的简写


** container 设置grid 布局之后, 子 item 项的 浮动, 转行内快, 单元格布局, 垂直居中 等属性将失效 **
repeat 用法 eg:  grid-template-columns: repeat(3, 100px);   三列, 每列都是100px, 重复三次
auto-fill 用法 eg: grid-template-columns: repeat(auto-fill, 100px);   n列, 每列都是100px, 直到一行装不下为止
minmax 用法 eg: grid-template-columns: 100px 200px minmax(100px, 1fr); 三列, 第一列为 100px , 第二列为 100px, 第三列 最小100px, 最大 100%;
auto: grid-template-columns: 100px auto 100px;   三列, 第一和第三列都是 100px, 第二列自适应 (圣杯布局)