共计 990 个字符,预计需要花费 3 分钟才能阅读完成。
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-