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-

grid 里面属性名称

容器内的属性