Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Nick Ocampo
Nick Ocampo
15,661 Points

Would you lay this out with CSS Grid or Flexbox?

I am redesigning the UI for a SaaS application in React and I was planning on using Flexbox for the layout, but after taking Guil Hernandez's CSS Grid courses (which were excellent!) I'm thinking that Grid maybe better suited for some of my needs.

One of my main goals is to be able to wrap a bunch of React components preferably without containing divs that are only there for layout purposes. I'd like to have most of the layout styles defined from a single container div with a unique class for it's layout (eg div.lists-layout is the container in one view and div.events-layout is the container on another) and targeting the components directly (so none of the annoying div.container div.row div.col-sm-12 div.col-md-6 BS!!).

This mockup is a good example of what a lot of the UI I'm designing looks like. Each individual detail block is a React component that is itself styled with Flexbox. Although the internal layout of each component is always going to be the same, each view in the app may present a collection of those components in a different layout. You may chose to stack 3 detail components in a row in one view, and have those same components in a column on another view. Here's another example of a different view.

My question is, should I be setting up my layouts for the views using Grid, or will Flexbox be better suited?

1 Answer

Zack Lee
PLUS
Zack Lee
Courses Plus Student 17,662 Points
Zack Lee
Zack Lee
Courses Plus Student 17,662 Points

I personally think the grid layout is the more powerful of the 2 approaches. but flexbox will be fairly responsive out of the gate. as you know with grid, you still need to media query the grid at different sizes to make it responsive. but in my opinion the gird is just far more customizable and can do things like change the order of dom elements without at javascript. but i suppose you can find ways of doing that with flexbox as well.

really it comes down to what you're more comfortable with. organizing a small list of links in a nav bar might be more practically laid out with flexbox, but organizing different modules around a screen may be better suited for grid.

Nick Ocampo
Nick Ocampo
15,661 Points

Thank you that does answer some of my questions. My sense is that the code for making those components fit in a variety of layouts responsively will be cleaner in Flexbox but perhaps having some grid autofit columns as the container for each view and then just setting column spans on it's children might be easier to set up?

Zack Lee
Zack Lee
Courses Plus Student 17,662 Points
Zack Lee
Zack Lee
Courses Plus Student 17,662 Points

thats true, you can explore the 2 in tandum, setting up flexbox elements which can then be dynamically rearranged with grid. check out "Css-Tricks" articles on flexbox and grid layouts. theres a plethora of information, and grid has so many possibilites than were explored in this course.