Grid extends beyond Container

Design help Layout & Design
1

Hi Everyone,

Have an odd problem and I’m not sure if I am doing something wrong.
I created a container with a max width of 1140px.
In that container, I created a 12 column grid with the intention of making areas, however, when I attempt to increase the gap between columns to 30px, the grid extends beyond the container and is cut off. It appears that the columns have a minimum width?

Even if I create the grid without placing it in a container first, create the areas with the intended result, as soon as I place it back into the container it still cuts off the grid. Here is a screenshot:

grid
grid1136×822 127 KB

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hey hey,

can you share your webflow preview and published site? Would help immensely with troubleshooting!

3

See this topic Minimum grid column width in editor complicates working with 12 grid layouts

4

Thanks Jeff, I guess the work around is to create multiple CSS Grids and stack them on top of one another instead of using 1 with areas.

5

Hi @Bartek_K this issue is only imperfection with visual feedback in WF preview mode (not only one) that cause some confusions. Here is short video with a few examples to clear some of your questions.

https://cln.sh/nOX2lT

6

Stan, thank you so much. That was extremely helpful. It solved all my problems, thanks again.

7

hi @Bartek_K if you don’t have further questions related to this topic feel free to close your request as solved.

Have a great day