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-