css grid layout column

Question

I am trying to create a layout with 5 columns using css grid. The first and the last columns should have white space.
I try to create it but somehow it turns out to be three rows instead of columns.

 .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; } 

I have the 5 columns but the first and the fifth columns should have whitespace.

Answer 1

You're missing the most important property display: grid . The example in CodePen Grid columns . Cheers, sigfried.