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中的示例。干杯，辛辣的。