Understanding Grid Layout Usage Scenarios

Hi. I’m new to Webflow and this forum.

I’m trying to learn/build by dissecting some Webflow templates.

Currently I am analysing Prospero Ecommerce UI Kit and in many instances I found some page sections built with Grid Display Layout without anything in there actually being aligned to the grid.

Overall it looks like an unnecessarily messy approach to me, but since these templates are built by Webflow team - and not some amateurs - there must be a catch somewhere.

Can anyone please clarify why using grid to achieve this kind of look, and not something neater, like Flex box for example? Wouldn’t there be a performance benefit in using a simpler tool for such a simple effect?

Here’s a link and a screenshot:

Prospero UI Kit

In this screenshot you can see that neither the text, nor the button, nor the image is aligned to the grid. Why grid then?

Thank you

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

hi @easyaskovic how did you came up with idea about differences in performance issue between CSS Grid and Flex. Can you point to some proven personal experience and examples you came across?

If it looks to you that using CSS Grid is overkill, nothing will stop you to use Flex if you are convinced that it will be for you better solution. There is always many ways how to achieve identical result. BTW you have probably missed that this Hero section is using combination of CSS Grid and Flex together.

Anyway, once you will learn and understand how to use CSS Grid you will find answers to all your questions. :wink:

Hi @Stan . Thanks for your answer. I admit that I don’t have any experience with Webflow performance issues. That was a random guess so let’s forget about that.

When I said that CSS Grid looked as a messy overkill I actually wished to be proved wrong and learn about the benefits of the Grid. It’s more about learning when & why to use it - than learning how to use it. There are many amazing tutorials to learn how to use the CSS Grid.

So yeah, I’d still like to know why the professional web designers used CSS Grid in the example above when nothing is visually aligned to any of the 12 columns of that grid, and when all the grid cells look empty? :slightly_smiling_face:

hi @easyaskovic when you look on header more closely you will see that content container is aligned to Grid columns 3-10 and this element is set to Flex for easy centring its content.

You can of course create this design with Flex only but when you would like to have another Hero with identical container aligned to left or right you will need to create a brand new Hero container with its custom class and styling.

To avoid this repeating process there is one general Hero container with General 12 columns Grid that can be used over and over again and containers inside can be aligned to any columns without creating a brand new Hero for different layout.

Hope that you will understand now better and responses solved your request. :wink:

1 Like