gird 布局 记录

display: gird;  // 块级
display: inline-grid;  // 行内

grid-template-columns

定义列宽

grid-template-columns: 100px 100px 100px;

grid-template-rows

定义行高

grid-template-rows: 100px 100px 100px;

grid-column-gap

设置列间距

grid-column-gap: 20px;

grid-row-gap

设置行间距

grid-row-gap: 20px;

grid-gap

设置列间距 与行间距 为 column-gap 和 row-gap 的合并形式

grid-gap: 20px 20px;

grid-auto-flow

表示布局的排列顺序

grid-auto-flow: row;  // 默认值 先行后列
grid-auto-flow: column;  // 默认值 先列后行
grid-auto-flow: row dense;  // 先行后列 尽可能填满当前行
grid-auto-flow: column dense;  // 先列后行 尽可能填满当前列

justify-items

设置单元格内容水平位置

justify-items: start | end | center | stretch;  // stretch 拉满宽度 默认

align-items

设置单元格内容垂直位置

align-items: start | end | center | stretch;  // stretch 拉满高度 默认

justify-self

align-self

作用于单个 单元格上面 值与justify-items一致

place-self

为上面两个的合并属性

justify-content

设置整个表格在容器的水平位置

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;  // 参考flex布局 的justify-content

align-content

设置整个表格在容器的垂直位置

alaign-content: start | end | center | stretch | space-around | space-between | space-evenly;  // 参考flex布局 的align-items

place-content

设置水平和垂直 为 justify-content 和 align-content 的合并形式

place-content: space-around space-evenly;

grid-template-areas

为表格划分区域 用 ( . ) 表示空白制空区域

grid-template-areas: 'a . c'
                     '. . f'
                     'g . i';

grid-area

为单元格指定区域

// 示例
.cs {
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas:
    '. a a b b .'
    'c c d d e e';
  grid-gap: 6px;
  align-content: center;
}

.xx0 {
  grid-area: a;
}
.xx1 {
  grid-area: b;
}
.xx2 {
  grid-area: c;
}
.xx3 {
  grid-area: d;
}
.xx4 {
  grid-area: e;
}

repeat() css函数

重复某个数值或者模式， 接收两个参数 第一个参数为重复的次数

第二个参数为数值或者模式

grid-template-rows: repeat(3, 100px)  // 数值
grid-template-rows: repeat(2, 100px 20px 80px)  // 模式

auto-fill css 关键字

自动填充 即可能多的填满 （次数）

grid-template-rows: repeat(auto-fill, 100px)
grid-template-rows: repeat(3, auto-fill)  // 无效

fr 关键字

代表比列， 用于父盒子

display: grid;
grid-template-columns: 1fr 2fr;  // 后者为前者的两倍

minmax() css函数

产生一个长度范围， 接收两个参数， 最小值 or 最大值 可以为 px、关键字

grid-template-columns: 1fr 1fr minmax(100px, 1fr);

auto 关键字

由浏览器自己填充长度

grid-template-columns: 100px auto 100px;