css grid布局

grid布局又称网格布局,是强大的css布局方案
之前常用的flex布局,为轴线布局,只能指定项目相对于轴线的位置,可以看做一维布局
grid布局则将容器划分为行和列,产生单元格,然后指定项目所在的单元格,可以看做二维布局
grid布局比flex布局更强大

display: grid;

表示开启网格布局,但此时容器撑满整行,与原来无差别

display: inline-grid;

表示开启网格布局,但此时容器宽度随元素内容自适应

容器属性

grid-template-columns

设置每一列的宽度,可以是具体值,也可以是百分比
例如:

/* 指定每一列的宽度 每个宽度中间用空格隔开 */
grid-template-columns: 150px 150px 150px;
/* repeat() 第一个参数是重复的次数,第二个参数是所重复的值 */
/* 上述代码可以改成 */
grid-template-columns: repeat(3, 150px);

grid-template-rows

设置每一行的高度,可以是具体值,也可以是百分比
例如:

/* 指定每一行的高度 每个高度中间用空格隔开 */
grid-template-rows:100px 100px 100px;
/* repeat() 第一个参数是重复的次数,第二个参数是所重复的值 */
/* 上述代码可以改成 */
grid-template-rows: repeat(3, 100px)
/* 有时单元格大小是固定的,但是容器的大小不确定,内容自动填充,可以使用如下属性 */
grid-column-rows: repeat(auto-fill, 100px);
/* 将容器等分为3列，每列宽度为容器总宽度/3 */
grid-template-columns: 33.33% 33.33% 33.33%;
/* 比例值 fr */
/* 为了方便表示比例关系，网格布局提供了fr关键字（fraction的缩写，意为片段)  */
/* 宽度平均分成4份 */
grid-template-columns: repeat(4,1fr);
/* 高度平均分成3份 */
grid-template-rows: repeat(3,1fr);
/* minmax():函数产生一个长度范围，表示长度就在这个范围之中，它接受两个参数，分别为最小值和最大值 */
/*共有3列，第一列150px，第二列400px，第三列宽度最小为20px,最大为90px*/
grid-template-columns:  150px 400px minmax(20px,90px);
/* 中间的宽度由浏览器自己决定 */
grid-template-columns:  100px auto 100px;
grid-column-gap,grid-row-gap,grid-gap(前两个的缩写),表示项目相互之间的距离,新版本grid-前缀已经删除
/* 每个项目列与列之间的距离为20px，行与行之间的距离为40px */
column-gap:20px ;
row-gap: 40px;
/* 上述代码可缩写为 */
gap: 40px 20px;
/* 第一列的宽度为150像素，第二列的宽度是第三列的一半 */
grid-template-columns: 150px 1fr 2fr;
/* 如果所有fr值之和大于1，则按fr值的比例划分可自动分配尺寸 */
grid-template-columns: 150px .1fr .2fr;
/* 如果所有fr值之和小于1，最终的尺寸是可自动分配尺寸和fr值的乘法计算值 */
/* 也就是(总长度-固定长度150)*0.1 (总长度-固定长度150)*0.2 */

grid-template-columns: auto 1fr 1fr 1fr;
/* 当所有fr的值之和大于1时,fr值的可自动分配尺寸是容器尺寸减去设置auto的列的fit-content尺寸,最终的尺寸就是最后3列按照1:1:1的比例平分了容器尺寸减去设置auto列的宽度得到的尺寸 */

grid-template-columns: auto .25fr .25fr .25fr;
/* 当所有fr的值之和小于1时,fr值的可自动分配尺寸是容器只存减去设置auto的列的fit-content尺寸,最终的尺寸就是剩余尺寸*0.25,最后剩余的尺寸就是auto的尺寸 */
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
/* 先以宽度为100px计算,尽量排更多轨道,计算时需要将(剩余空间-空轨道) 平均分配*/
/* 使用auto-fill关键字自动填充的时候，repeat()函数不能和auto一起使用的，但可以与长度值和百分比值一起使用 */
/* 按照100px宽度创建尽量多的轨道，将剩余空间 平均分配 */
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

/* 让尺寸适应于内容，但不超过设定的尺寸，常用于希望grid子项的宽度随着内容变化，但是又不希望宽度太大的场景 */
/* fit-content()函数只支持数值和百分比值，fr值是不合法的 */
grid-template-columns: fit-content(100px) fit-content(100px) 40px auto;

/* 内容有多宽，盒子就有多宽，不会顾及父级盒子有多宽，只满足自己的需求 */
max-content

/* 装下单个最大内容的最小宽度 */
min-content

/* 在不超过父级盒子宽度的情况下，尽量撑开盒子满足自己的需求 */
fit-content
/* max-content和fit-content在自己内容不足以撑满父盒子时，宽度只为自己内容的最大宽度，不会再强行增大 */