Flexbox vs grid for page layout

The fact that flexbox was introduced is a terrific step forward, I just feel a bit overwhelmed by the amount of choice that I am now dealing with. I do not have a strong HTML/CSS background, but I also never found the grid-based approach to layout very intuitive, and to be honest, I don’t see so much of a benefit in using grids, in general. Most of the websites that I create are not so complex, and even if they were, with flexbox I can make sure that all items have the same width/height, even without a grid. From my perspective, I’d be more than happy to stop using the grid system altogether, and create layouts exclusively using flexbox. Some articles I found online support such a choice, but I’ve also heard from other sources (incl. members of the webflow team) that it might not always be the case, and there may still be situations where it’s recommended to use the default grid system. So my questions would be:

  1. Can you guys point us to some generic, in-depth recommendations on when and why it’s appropriate to use one or the other? As a side note, but related: I’ve been using custom divs instead of containers from day one, in order to be able to deal with large screen resolutions, and that is one more reason why I don’t feel compelled to stick to the grid/columns method.

  2. Besides layout and rendering issues, is there any implication in terms of SEO?

  3. When using flexbox for layout, can we ditch containers and columns altogether? Can we get the same results by using divs exclusively, and play with the flexbox properties?

  4. It may be a good idea to have a short tutorial on how to re-create the navbar component when using flexbox for page layout, since the default navbar was introduced with the grid system in mind. There’s a related thread on this (Should I avoid using flexbox in the navbar?), but not many details on the actual settings and how to set-up the animation to display menu options when the hamburger menu is clicked on.

Below is a link to my website, I am still working on making everything work properly at different resolutions, but the homepage is pretty much set up. I guess it may be a good example of how a flexbox-based approach could work, even though a similar layout could probably be achieved without flexbox, in some way or the other.
https://preview.webflow.com/preview/luca-benazzi?preview=724d632589e21e54dffdf87ab2f5d5f0

2 Likes

Good question!

Prebuilt elements such as Container and Columns are designed to solve most common layout problems out of the box.

Whenever you need more customization, there’s nothing wrong with using custom Divs with Flexbox styles to achieve your specific layout needs. Just make sure that everything works as intended on smaller screens.

There won’t be any implications in terms of SEO and you can always optimize your content by using semantic HTML Tags for Div elements :point_down:

2 Likes

Thank you Gadzhi. That makes sense, even though I am still finding it hard to nail down some solid rules of thumb. After doing some more in-depth research, I am now finding out that actually what I am referring to as the “Grid system” is still in development, so I guess the columns and containers that I was referring to are just the currently most commonly used layout method, based on concepts such as the ‘display’ property and the box model.

What I am also learning is that these tools are not really intended for layout purposes, and therefore the Grid system is now being developed by the W3C. That was not so obvious to me when I posted my question. According to what I am reading, the combination of grid+flexbox (and not flexbox alone) is going to allow for a lot more flexibility in web design. So my guess is that the same way that you guys have incorporated Flexbox into webflow, we’ll see something similar for the Grid system, once it starts to get supported by most browsers? I have just posted this as a request on the Wishlist site, I was actually a bit surprised that it was not there already, since this looks like a very desirable feature to me! CSS Grid Layout | Webflow Wishlist

Back to my question, I haven’t found any in-depth resource that explains how to combine together the existing layout methods (columns and rows/Flexbox). For example, this is a tutorial called “Grid by example”, it’s pretty good but it applies to the yet-to-come Grid system, and says nothing about the existing replacements for it, nor is Flexbox mentioned in any way. It would be great to see something similar, that applies to the layout tools available in Webflow:
http://gridbyexample.com/examples/

I would love to keep this short but the reality is, I am struggling to find some clear, definitive information out there. I’ve found several articles saying that Flexbox is not intended for high-level page layout, but some of the Webflow tutorials show how to use it for things like sidebars, or a footer that always appears at the bottom of the page, even when the page content is limited. My understanding is that this is because we don’t have a truly semantic Grid system yet, and with the current method, Flexbox is the best way to achieve certain results. It’s just my guess, though. And the overall question: as far as it looks good, why can’t I just use Flexbox for page layout? Are pages going to render more slowly if we do so? What are the situations in which it’s still advisable to stick to the row/columns method?

Here is a related discussion, and pretty interesting, on whether it’s convenient or not to use the column widget: Should we let go of the columns widget? - #8 by uzzer

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