grid布局

grid布局

阅读推荐

grid布局学习指南

http://blog.jirengu.com/?p=990

grid规范草稿

https://drafts.csswg.org/css-grid/

概念

添加在父元素身上的属性

容器属性

display属性

display:grid|inline-grid

grid-template-columns 设置列宽

• auto 自适应
• fr关键字
• repeat
  • 参数1 重复的次数
  • 参数2 重复的值

 /* 9宫格，每一个数值代表一列的宽度 */
grid-template-columns:100px 100px 100px

/* fr关键字 */
grid-template-columns:1fr 1fr 1fr;

/* repeat写法 ,3列等宽 */
grid-template-columns:repeat(3,1fr)

grid-template-rows设置行高

grid-template-area区域划分

/* 父元素划分区域 */
/* 名字统一，就占多个领域 */
grid-tempplate-areas:
"a1 b1 c1"
"d1 e1 f1"
"g1 h1 i1"
;

/* 子元素获得分封的领域 */
.div:nth-child(1){
    grid-area:a1;
}

grid-teamplate简写

grid-teamplate是grid-template-columns grid-template-rows grid-template-area的简写

grid-template:{
    "a1 b1 c1" 1fr 表示行
    "d1 e1 f1" 1fr
    "g1 h1 i1" 1fr
   / 1fr 1fr 1fr
    表示列
;
}

grid-row-gap 行间距

 grid-row-gap:10px

grid-column-gap 列间距

 grid-column-gap:10px

grid-gap简写

/* 第一个值是水平的行值 第二个值是垂直的列的值*/
grid-gap:10px 10px 

内容对齐方式

justify-items水平对齐

align-items垂直对齐

place-items简写

/** 先垂直再水平 */

justify-content 水平对齐

align-content垂直对齐

place-content简写

/* 先垂直再水平 */

添加在子元素身上

/* 行的线 起始与结束 */
grid-row:2/3

/* 列的线 起始与结束 */
grid-column:2/3;


/* 简写是先垂直 再居中 */