css网格布局列

问题描述 投票:0回答:1

我正在尝试使用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列,但第一列和第五列应该有空格。

html css3
1个回答
0
投票

你错过了最重要的财产display: grid。 CodePen Grid columns中的示例。干杯,sigfried。

© www.soinside.com 2019 - 2024. All rights reserved.