html - css 网格布局列

Question

我正在尝试使用 CSS 网格创建一个包含 5 列的布局。第一列和最后一列应有空格。
我尝试创建它，但不知何故它变成了三行而不是列。

.grid_container{
    grid-template-columns: 1fr 2fr 4fr 2fr 1fr;
    grid-template-areas: ". A B C ."
}

#column1 {
    grid-area: A;
    background:red;
    padding: 100px;
}

#column2 {
    grid-area: B;
    background:blue;
}

#column3{
    grid-area: C;
    background: orange;
}

我有 5 列，但第一列和第五列应该有空格。

Answer 1

您缺少最重要的属性 display: grid。 CodePen 中的示例 Grid columns .干杯，sigfried。