grid-template-columns
是 CSS 的 Grid 布局属性,用于定义网格的列宽度。
解法1:直接定义列宽
.container {
display: grid;
grid-template-columns: 100px 200px auto;
}
这个代码定义了三列,第一列宽度为100px,第二列宽度为200px,第三列宽度自动调整以填满剩余空间。
解法2:重复定义列宽
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
}
这个代码定义了三列,所有列的宽度都是100px。
解法3:用百分比定义列宽
.container {
display: grid;
grid-template-columns: 1fr 2fr 3fr;
}
这个代码定义了三列,第一列宽度为1份,第二列宽度为2份,第三列宽度为3份。
解法4:用minmax()定义列宽
.container {
display: grid;
grid-template-columns: 1fr 2fr minmax(100px, 1fr);
}
这个代码定义了三列,第一列和第二列宽度按照1:2分配,第三列的宽度至少为100px,但如果有更多空间也可以获取。
解法5:用auto-fill关键字定义列宽
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
}
这个代码定义了列宽为100px的列,如果容器宽度不够放下一个列,那么会尽可能多地创建列。
解法6:用auto关键字定义列宽
.container {
display: grid;
grid-template-columns: 100px auto 100px;
}
这个代码定义了三列,第一列和第三列宽度为100px,第二列宽度自动调整以填满剩余空间。