CSS Grid 网格布局(入门)- 设置行和列 grid-template-columns 和 grid-template-rows

grid-template-columns 设置网格列数,并定义每列的宽度。 grid-template-rows 设置网格行数,并定义每行的高度。

两个属性都是设置在网格容器上的,接受多个值,要用空格分隔。

.wrap{
	display: grid;
	grid-template-columns: 50px 100px 150px;
	grid-template-rows: 60px 60px 60px;
}
gird_网格布局行和列 3-1

以上代码设置3列宽分别为 50px 100px 150px。3行高为60px。

还能用em、百分比:

.wrap{
	display: grid;
	grid-template-columns:20% 20% 60%;
	grid-template-rows: 60px 60px 60px;
}

设置3列宽为20% 20% 60%。

CSS Grid 网格布局 - auto 关键字

html,body,.wrap{
	height: 100%;
	margin: 0;padding: 0;
}
.wrap{
	display: grid;
	grid-template-columns: 50px auto 150px;
	grid-template-rows: 60px 60px auto;
}

以上代码,auto 设置能让第二列占满剩余宽度,让第三行占满剩余高度。 一行中只有一个 auto,则代表占满剩余宽度。

CSS Grid 网格布局 - fr 关键字

fr 表示剩余空间做等分,是一个相对尺寸单位。

.wrap{
	display: grid;
	grid-template-columns: 1fr 1fr;
}

以上代码表示 2列,宽度各占50%。如果一行中只有一个 1fr,则代表占满剩余宽度。

.wrap{
	display: grid;
	grid-template-columns: 1fr 3fr 100px;
}

以上代码表示 在剩余宽度中,第2列是第1列的3倍。

CSS Grid 网格布局 - repeat() 重复

.wrap{
	display: grid;
	grid-template-columns: repeat(3,100px);
}

以上代码表示 重复3次,每列宽度为100px。

.wrap{
	display: grid;
	grid-template-columns: repeat(3,1fr);
}

以上代码表示 重复3次,每列宽度为33.3333333333%(父元素的1/3)。

.wrap{
	display: grid;
	grid-template-columns: 50px repeat(2,100px) auto;
}

以上代码表示 重复2次,每列宽度为100px。那么第2列、第3列宽度为100px。

grid-template-columns: repeat(2,50px 100px 150px);

/* 等同于 */ 
grid-template-columns: 50px 100px 150px 50px 100px 150px;

以上代码表示 重复2次,宽度为50px 100px 150px。那么一共设置了6列。

CSS Grid 网格布局 - minmax() 长度范围

minmax(最小值,最大值) 接受两个参数,设置最小值、最大值函数。

.wrap{
	display: grid;
	grid-template-columns: 1fr minmax(200px, 1fr);
}

以上代码表示 设置2列,第1列宽度是1fr,第二列的宽度范围为最小值 200px,最大值是1fr。

.wrap{
	display: grid;
	grid-template-columns: 100px minmax(200px, 1fr);
}

以上代码表示 设置2列,第2列宽度的最小值为200px,最大值为占满剩余宽度。

.wrap{
	display: grid;
	grid-template-columns: 100px minmax(max-content, auto);
}

以上代码中用到了 max-content关键字,表示第2列宽度的最小值为这列最大内容的大小,最大值为占满剩余宽度。

CSS Grid 网格布局 - auto-fit 关键字 和 auto-fill 关键字

auto-fit 和 auto-fill 都是模式填充,但是两者有区别。 这种区别在网格容器宽度大于网格项的最小宽度总和时才看的出。

需求:设置网格项宽度范围,然后网格项宽度根据网格容器宽度的变化而变化,在小于设定的最小宽度时换行。

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

/* 区别于 */ 
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

auto-fill 不填满网格轨道,auto-fit 始终填满网格轨道,查看实例

CSS Grid 网格布局 - max-content 和 min-content

max-content 和 min-content 都是自适应大小的属性。

max-content :根据元素内容的最大宽度来设置大小。中文和英文都是不折行的宽度。

min-content :根据元素内容的最小宽度设置大小。中文是一个字的长度,英文是单词的长度。

.wrap{
	display: grid;
	grid-template-columns:max-content min-content max-content min-content ;
}
grid_网格布局_max-content 3-4

JavaScript 语法:

object.style.gridTemplateColumns = "50px 100px 150px";
object.style.gridTemplateRows = "100px 100px 100px";