Streaming live at 10am (PST)

How to create 32 columns side by side?

Hello!

I’m trying to do something similar to the FIFA world cup match calendar that can be found here http://www.fifa.com/worldcup/matches/index.html.
And I’m having an hard time figuring out how to create the calendar. I’ve tried using columns, but the maxium I can create automatically is 6.

Thanks in advance :slight_smile:

Yeah bud, it would definitely work better if you used a calendar embed. There’s a number of ways to do it, depending on your budget.

1 Like

Agree a calendar embed would be useful.

To have 32 columns side by side, create a div block and call this block-wrapper. Give it width 100% and for now, a height of 100px (or whatever)

Give it flexbox, horizontal and centre (center if you’re from USA)

Add a div box inside, give a class of block, flex box vertical, centre and add text in. Give div a width of 2.77% (100 divided by 32) then copy and paste another 31 times. Edit text and style as you wish.

http://magicians-sandbox.webflow.io/

Have a look:
https://preview.webflow.com/preview/magicians-sandbox?preview=454975d6856e10b34ae69debfe0f883f

1 Like