Need guidance: when to use Lists, Flexbox, Grid?

I’m a newbie working on the Responsive Web Design Certification and running into the following issue regarding CSS:
The challenges were great for teaching me the information. I understand how CSS works and the basics of how to use the different properties, selectors, functions, etc. But when it comes to doing a project, I find myself wondering how to approach it. More specifically, should I just go ahead and build the page piece by piece, stacking divs one on top of another, should I be organizing the page as lists, or should I be implementing Flexbox or Grid to control the overall layout?
Can someone point me to a resource that explains this aspect? I am not getting this from the FCC tutorials. Thanks!

NOTE: I can’t post this without saying a huge THANKS to @QuincyLarson for this amazing resource and community.

I am only an amateur so my opinion has not been engraved in stone.
Lists are used for lists. Very often you see them used in a nav-tag, each item being a button that links you to a section of the webpage.
When building a page you will be stacking and nesting divs. Flexbox can help you to make the organisation of your webpage more responsive. Divs that are lying next to each other on a laptop view will be stacked on top of each other on a mobile view (flex-direction: row or column)
Flexbox took some getting used to but I am beginning to use it more and more. I enjoy it most of all when I am working on the details of a section. Grid is another newer solution that helps you to create responsive pages.
10 years ago developers were still using tables for the layout of a webpage which resulted in unreadable webpages on your mobile phones (remember those tiny letters and having to scroll?)
Tables are very easy to implement but they result in static and completely unresponsive webpages.
Then came divs which allowed devs to create responsive pages but divs and floating properties are very difficult (in my opinion) to use, I have often cried in despair with my husband coming in telling me to 'quit working on that damned computer".
Grid and flexbox have been designed to solve these problems.
Grid is still new and I am not sure that all browsers already implement grid. I love it because it is easy and allows you to do so much with a webpage.
It is important to remember that flexbox and grid are not implemented on older browsers, You need to be able to work with and without them.
So, try them out and start coding, this will be the best way to figure out what these systems have been designed for.


Don’t organize the page by lists.

In the Real World, it will depend on the project, but practice using Flex and Grid in your projects now so that you understand them and can use them when you want to.

1 Like

Great question, and an easy source of confusion.

So lists, be they <ul>, <ol>, or <dl> (unordered lists, ordered lists or data lists, in order), are actual HTML DOM elements. Both the first two take <li> tags (list items), while the third takes <dt> and <dd> tags (data term and data definition). But, for the purpose of your question, lists are a recognized HTML entity in and of themselves.

Grids and flexboxes, on the other hand, are a CSS design pattern. Any block-level element can be given the attribute display: grid; or display:flexbox, and turned into a flexible container. They serve similar purposes, but there is a key difference, as outlined on Medium or this one on Hackernoon:

  • display: flexbox; – a one-dimensional layout pattern, meaning that it is designed to excel at things like menubars or headers. It is content-based, meaning that the content itself sets its layout.
  • display: grid; – a two-dimensional layout pattern. In this case, the layout flows in both rows and columns. At a basic level, we can set template-columns, and flow the content into the given columns, much as a newspaper.

The two can be made to work together nicely: if your site uses a grid layout, you can easily use flex layout for the header.

Of the two articles mentioned above, the hackernoon article is far more hands-on.


Thank you @snowmonkey. These are exactly the kind of resources that I was looking for!

1 Like

Delighted to be of service. Again, it ain’t what i know, its what i can RESEARCH.


I will have to re-visit this site.

? Questions in mind, @helen1? Here to help.