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