网格布局 CSS Grid
容器 项目
Display:grid;块级网格
display:inline-grid;行级网格
宽度
grid-template-columns:100px 100px 100px ;
行高度
grid-template-rows:100px 100px
取值:默认值none;绝对单位px;
百分比(相对于容器);
fr关键字(fraction)---弹性系数 按照比例分配剩余空间 一般与绝对单位搭配使用(1fr和2fr 后者是前者的两倍);
auto关键字:表示浏览器自行决定 grid-template-columns: 100px auto 100px;
minmax():表示长度在这个范围之中,分别是最小值和最大值,空间不足时最小值显示 空间有余时最大值显示
grid-template-columns: 1fr 1fr minmax(100px, 1fr);minmax(100px, 1fr)表示列宽不小于100px,不大于1fr。
repeat()函数:接受2个参数,第一个为重复的次数,第二个为所需要的数值,多个值也可以重复。repeat(重复的次数,一个或空格隔开的多个值 ) grid-template-columns: repeat(2, 100px);表示共两列,每列各100px
Auto-fill关键字:单元格大小固定但是容器大小不确定,如果希望每行或每列容纳尽可能多的单元格时使用 grid-template-columns:repeat(auto-fill,100px);表示每列宽度100px,然后自动填充,直到容器不能放置更多的列。
网格布局 行和列的间距
Column-gap列和列之间的间距
Row-gap行和行之间的间距
取值:0 默认值;px;百分比相对于容器进行计算
简写:Grid-gap:行间距 列间距;
没有第二个值,浏览器默认第二个值等于第一个值
单元格在容器内的位置
Justify-content:center水平位置,总网格区域相对于容器的作业进行对齐
命名区域
Grid-template-areas:“
”
a | a | a |
b | b | . |
c | c | c |
给网格划分区域
多列布局
元素被分割的列数column-count:4;
浏览器自动column-count:auto;
列的宽度:column-width:100px;每一列的宽度
column-width:auto;浏览器自适应
列与列之间分割线column-rule:;
column-rule-style:线型 solid dashed...;
column-rule-width:线型 solid dashed...;
column-rule-color:线型 solid dashed...;
简写:column-rule:10px solid red;