Grid 布局介绍

grid 里面属性名称

在学习grid标签前,要先认清下列属性表明的含义,方便学习.

容器内的属性

grid-template-columns
        grid-template-rows
        数字 百分比 fraction分数
        grid-rwo-gap
        grid-column-gap
        grid-gap(缩写)
        grid-templete-areas
        grid-auto-flow(改变排版方向)
        justift 改变主轴(横向)布局 align副轴(纵向)
        justify-items 
        align-items
        place-items(缩写)
        justify-content 默认stretch
        align-content
        place-content(缩写)
        grid-auto-columns
        grid-auto-rows

grid-template-columns
设置的是元素有列,每列的宽度是多少. 单位能够用fr(fraction, 按比例分配宽度), px固定宽度, % 百分比宽度.grid-template-columns: 100px 100px 100px,定义网格内 共3竖每竖宽度100px. 固然这里会发现若是有10竖的话那不得敲一堆100px???这里为了省事咱们能够用repeat(3,100px)重复3次,每一个都是100px; 嫌麻烦不想去计算个数的话也能够用repeat(auto-fill,100px)自动用100px 铺满.
grid-template-rows
的话就是一样的理解方式,只不过row定义的是行的高度.没有设置到的元素 默认回事stretch拉伸平分空白空间.
row-gap column-gap
row-gap 和column-gap 刚开始的写法是 grid-row-gap/grid-column-gap 后来改成如今的row-gap/column-gap. 分别是定义行间的距离和列间距离.能够缩写为gao:列间距 行间距. 若是两个数值相同的话,能够所写成一个.
grid-template-area
分划区域,分化的时候要注意,咱们的布局是盒子(方方正正的),所以划分区域也要是方形区域,否则会致使代码错误不能识别.
grid-auto-flow
和flex的direction很想,定义排列方式.横向row 竖向columns.不过这里多了个属性row dense, column dense. 是为了节约页面空间,自动补满.
justify-