Css 网格模板列未与项目列表一起应用

我正在尝试用网格布局实现一个列表组件，其中包含一些用于过滤等的子组件。问题是，尽管我在

网格模板列

规则中只声明了两个，但这些项会被推到第三列中

.container{
显示：网格；
利润率：50像素；
宽度：计算（100%-100px）；
放置项目：拉伸；
网格模板列：重复（2，1fr）；
网格模板行：自动；
网格模板区域：
“下拉列表”
“过滤器。”
“过滤器。”
“断路器”；
}
.下拉列表{
网格区域：下拉列表；
背景色：红色；
}
.过滤器{
网格区域：过滤器；
背景颜色：绿色；
}
.断路器{
网格区域：断路器；
背景颜色：蓝色；
}
.项目{
背景颜色：橙色；
}
.分页{
网格柱：1/端；
背景颜色：黄色；
}

下拉列表
滤器
断路器
项目
项目
项目
项目
项目
项目
项目
项目
项目
标页码

您正在使用

网格列：1/end

并且您没有定义任何名为

end

的区域，因此您正在隐式网格中创建一个新列，以包含3列（2个显式定义，1个隐式）

改用

-1

：

如果给定了一个负整数，它将从显式网格的端开始反向计数

.container{
显示：网格；
利润率：50像素；
宽度：计算（100%-100px）；
放置项目：拉伸；
网格模板列：重复（2，1fr）；
网格模板行：自动；
网格模板区域：
“下拉列表”
“过滤器。”
“过滤器。”
“断路器”；
}
.下拉列表{
网格区域：下拉列表；
背景色：红色；
}
.过滤器{
网格区域：过滤器；
背景颜色：绿色；
}
.断路器{
网格区域：断路器；
背景颜色：蓝色；
}
.项目{
背景颜色：橙色；
}
.分页{
网格柱：1/-1；
背景颜色：黄色；
}

下拉列表
滤器
断路器
项目
项目
项目
项目
项目
项目
项目
项目
项目
标页码

您正在使用

网格列：1/end

并且您没有定义任何名为

end

的区域，因此您正在隐式网格中创建一个新列，以包含3列（2个显式定义，1个隐式）

改用

-1

：

如果给定了一个负整数，它将从显式网格的端开始反向计数

.container{
显示：网格；
利润率：50像素；
宽度：计算（100%-100px）；
放置项目：拉伸；
网格模板列：重复（2，1fr）；
网格模板行：自动；
网格模板区域：
“下拉列表”
“过滤器。”
“过滤器。”
“断路器”；
}
.下拉列表{
网格区域：下拉列表；
背景色：红色；
}
.过滤器{
网格区域：过滤器；
背景颜色：绿色；
}
.断路器{
网格区域：断路器；
背景颜色：蓝色；
}
.项目{
背景颜色：橙色；
}
.分页{
网格柱：1/-1；
背景颜色：黄色；
}

下拉列表
滤器
断路器
项目
项目
项目
项目
项目
项目
项目
项目
项目
标页码

仅声明两列并不意味着只能有两列。如果网格区域位于这两列之外，将为它们创建新列。仅声明两列并不意味着只能有两列。如果网格区域位于这两列之外，将为它们创建新的列。感谢您快速而详细的回答！似乎我误解了这里的

end

关键字，但是你的帖子让用法更清楚了。谢谢你快速详细的回答！似乎我误解了这里的

end

关键字，但是你的帖子清楚地说明了用法