Grid layout and content positioning

Hi, I am very new to webflow with very basic design skill so I apologise in advance if this is a silly question!

But I can’t for the life of me work out how to solve this issue.

I have a container which i change to a grid with 2 rows, text in row 1 and a button on the right in row 2. But when I change the container to a grid I’m unable to move the items into the layout I prefer and the button is pushed down out of the grid? What exactly am I doing wrong?

Thank you in advance


Here is my site Read-Only: https://preview.webflow.com/preview/test-site-986ad1?utm_medium=preview_link&utm_source=dashboard&utm_content=test-site-986ad1&preview=6d3966ab1cde6b6c829f1c8810d5365c&workflow=preview

Here’s a video tutorial on how to use Grid layout: Link

Thank you, I will watch it now

Hi Gareth, welcome to Webflow Forum.

I looked into your project and I’m guessing that you are applying Grid layout on the container block and when you do that your content (text) goes to second column and button goes to second row.

So one thing you should know here is that, on Webflow’s default container block comes pseudo elements (::before and ::after) so because of this reason first area of the grid is now taken by ::before so the other elements are pushed one position away.

Saying that it is not recommended to apply Grid layout on the container block, it is best you only use it for the max-width and which is re-used to place the content inside. This way all your contents will have the same width or say max-width.

And to create a grid layout you just add a new DIV and apply Grid to that. And another suggestion, it is also best you places DIVs inside for Grid child and only keep the content inside those DIVs; this way you can have multiple elements inside a child.

I hope this helps.

excellent, thank you for your help

1 Like

Glad to help, if your issue is resolved I request you to mark this post as Solved so this post gets closed.

It sounds like you might need to adjust the grid settings a bit. Make sure each item is placed in the correct grid area. You can do this by selecting the text and button and assigning them to the appropriate rows and columns within the grid. If the button gets pushed down, check if it’s accidentally set to span multiple rows or columns. Sometimes, just dragging the elements into place can help.