Streaming live at 10am (PST)

How to add 7 Column Grid That is Even?


#1

I see the column grid can have up to 12 columns. How do I make it so I have 7 even sized columns for the grid? Right now I can do | 2 | 2 | 2 | 2 | 2 | 2 |

I just need one more | 2 | added.

Thanks guys!
Sean


Here is my public share link: LINK
(how to access public share link)


#2

@seank,

Can't get there.


#3

Really? there has to be a way.. I mean why would Webflow limit that when you can enter it straight code.

@cyberdave @PixelGeek - how would this be accomplished in Webflow?


#4

@seank,

I'm sorry, I was talking about you link to the your site... it's not working for me.

I would think that using Flexbox for this would be like falling off a log, but let me see it in your link before I commit to that idea 110%.

Thanks and sorry for the confusion.


#5

Oh I didn't link it.

It would be a simple grid with horizontal links, 7 total text links going horizontal evenly.


#7

That's at the bottom by default every time you make a forum post.


#9

@seank,

Did you try making the master wrapper a flexbox? Have you used Flex in Webflow? Super easy.


#10

Hmm. I looked at it but I didn't see where you can set your number of Cols?

Can you show me an example with 7 horizontal nav links sir?


#11

@seank,

Can you link me or show me a graphic of what you need?


#12

Sure,

Link: http://janehudson.webflow.io/about#contactus

Notice the navigation links across the top... it only adds up to 6. I need to have 7 across the very top of the page.


#13

@seank,

I was looking for a live, read only link to your Webflow code. Sorry, I haven't had enough coffee this morning and wasn't clear about the type of link I needed. If you make a Nav wrapper a Flex container, you can adjust the navigation items so that all of them fit the space given. There are several settings: Flex... wrap, grow, shrink and basis that will allow all 7 nav elements to fit. Without live code from your site, it's difficult for me to see what you have so far. I'm sorry.


#14

https://preview.webflow.com/preview/janehudson?preview=b3bba42250fbf3331f27229f445398c8


#15

There are many ways to go about doing this. One quick way would be replacing the width of these elements. Instead of using pixels, set the width for each element to 1 divided by 7 (14.28%), and make sure to take them out of the columns.

Check this out in the video below:

After that, you can set constraints on the About Navigation item if you don't want the links going all the way to the edge. Because you're using percentages instead of fixed pixel widths, the you only have to change the parent container and the children will resize automatically! :slight_smile:


#16

That was it! thank you @McGuire and also @itbrian40 for all of your help.


#17

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.