使用 grid-template 属性防止列基于内容扩展

Question

我正在练习 Css Grid，我正在使用 grid-template 属性创建布局：

main{
    width: 1444px;
    height: 70vh;
    display: grid;
    grid-template:
    'cas cas cast'
    'cas cas cast'
    'ras  rast rastt';
}

据此，我希望元素“cas”占据空间的两个部分并且只投射一个。问题是，当我将内容放入“演员表”时，该列正在扩展，占用了太多宽度。我知道我可以使用模板列设置固定宽度，但是如何使用此网格模板属性来实现相同的宽度？ 谢谢

Answer 1

在fr 中指定列宽，否则它们将默认为auto

main{
    width: 1444px;
    height: 70vh;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template:
    'cas cas cast'
    'cas cas cast'
    'ras  rast rastt';
}