CSS网格布局列

Question

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

 .grid_container{ grid-template-columns: 1fr 2fr 4fr 2fr 1fr; grid-template-areas: ". ABC ." } #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列中的示例。 干杯，sigfried。