网格布局 CSS

网格布局 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；