How to make 5 column in the same row

Hi guys,

I’m try to do a row with 5 column. How can I do that?

Thanks a lot.

Select this preset and then you can customize the grid:

Thank you man.

I will do this.

Customize how? I can’t seem to make all the columns the same size (3, 1, 3, 1, 3 or 2, 2, 2, 2, 2)?

@jgervin, Webflow uses a 12 column grid for the columns. So it has to add up to 12. If you want to create something custom you can drag some Blocks (divs) onto the canvas give them the same class and make them float left and give them a percent width. This way they will stack next to each other. Then you can customize the way they will stack on mobile as well.

Let me know if you need further explanation.

7 Likes

@thesergie: I am trying to use the 12 column grid for 1,2,2,2,2,2,1 so I effectively end up with 5 columns with data and two skinny empty columns. How do I do that?

@wendy_lynn and @jgervin Currently you can only have up to 6 columns, so it’s not possible to have 7 or more columns. Also If you have 5 columns, the column numbers have to add up to 12, so 3,1,3,1,3 won’t work because that’s 11 columns total. 2,2,2,2,2 also won’t work because that’s 10 columns total.

What you can do is create your own 5 column structure that’s spaced evenly (20% width) using div blocks and floats. I explain it briefly here:

@thesergie creating a custom coloumn using “block” is what you mean is div block ? I created a similar one. So I have a section and inside that is a div which is full-width and I have 5 div inside that with each 20% width. So for desktop I need all 5 coloumns when I change to tablet or mobile it is still the same 5 coloumns… I need them to stack… how do I do it ? because I am not able to set how these div blocks should be displayed for each device.
Sorry if my question is silly, I am new to this.

What you have to do is set it from 20% to 100% in the device that you want them to stack on. Let me know if you got it working.

I am curious what is the reason for this 12 column grid? It seems very limiting to me, e.g. I wanted to create 7 column layout with equal column widths and it seems not possible…

Here’s a simple Old School solution,
considering the fact that the main purpose of ROWS is to keep the content aligned with a certain form of grid, use a simple div:

  1. Create a new div
  2. Put your 5 objects inside that new div (that object can be a whole div containing logos, text blocks, buttons, etc
    3.Center the Align in that new div where you put those objects (wich will center your 5 elements)
  3. Add some margin around the 5 objects (or can even be containers)
  4. Enjoy (I hope!)