CSS Grid布局

grid布局

1.容器属性 grid-template-*

grid-template-columns: 100px 100px 100px;    
// 等同于   
grid-template-columns: repeat(3,100px);

// 注:想要多少行或列,就填写相应的属性值的个数,不填写,自动分配

// 容器大小不确定但项目大小确定时,auto-fill属性会让item自动填充
grid-template-columns:repeat(auto-fill,100px);

// fr是fraction的缩写,意思为片段,也就是说平均分(3,1fr的意思是宽度平均分成3份)
grid-template-columns:repeat(3,1fr); 

// 分为三列,中间列宽度自适应
grid-template-columns:100px auto 100px; 

grid-template-rows: 100px 100px 100px;  // 其他属性同columns

/* item的间距 */
row-gap: 10px; // 行与行之间的间距
column-gap: 10px;  // 列与列之间的间距
gap:10px;  // row-gap和column-gap的缩写,如果行列间距相同可只写一个

/* item的排列方式 */
grid-auto-flow:row;  // 默认值.
grid-auto-flow:column;  // 纵向排序

/* item的对其方式 */
justify-items: center; 
align-items: center;  
place-items:center center;  // 水平垂直都居中对其 

/* content(整体内容)的对其方式 */
justify-content: center;
align-content: center;

2.项目属性

/*
grid-column-start /  grid-column-end
grid-row-start /  grid-row-end
*/
grid-column-start:1; 
grid-column-end:3; 
//注: 用来指定item的具体位置(从哪根网格线开始到哪根网格线结束)

/* 给item自己定位 */
justify-self:center;  // align-self / place-self