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 Josh Hicks
Josh Hicks
14,146 Points

Grid vs Flexbox?

When it comes to website layouts and positioning, what are the best practices? There are a number of ways to do it I think, and I'm never sure which way is THE BEST way. Whether it's using margins and padding, relative or absolute positioning, grids or "eyeballing" it, or even Flexboxes. Can someone let me know what is considered the current "best" way to setup layouts. Especially for cross-browser compatibility. Thanks in advance!

5 Answers

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

For compatibility I'd recommend using a grid. Flexbox is likely the future and you could use it for projects where you are certain legacy support isn't needed (or to show off your skills!).

nfs
nfs
35,526 Points
nfs
nfs
35,526 Points

A very helpful discussion. Thank you all.......

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

I have to agree with Tom, its grid for now.

I can't wait for Flexbox to be more compatible though, things will be so much better.

Now your only decision is which grid system to use? and in that case you can download a few and see which works best for you.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

> Now your only decision is which grid system to use?

I recommend you stay away from anything that advertises itself as a framework or system that will solve many of your problems with it's opinions.

Check out [simplegrid](simplegrid.info) instead. If you need little more check out Pure CSS.

Josh Hicks
Josh Hicks
14,146 Points
Josh Hicks
Josh Hicks
14,146 Points

Ok ,thanks a lot! Guess now it's time to perfect the usage of grids.

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

The Build a Responsive Website course covers making a very simple grid system which I have used as a starting point for several projects (at a quick glance it looks similar to the simplegrid James suggested). I'd recommend going through the whole course (if you haven't already).

Edit: I think building the grid is actually in this video the responsive course goes over converting it to be suitable for a responsive site.

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

Hi,

How long would it take to make a grid system? I have a competition that I will need make a website with no frameworks and. And it needs 5pages like home, about, contact, service etc.. And i have 6-7hours to make it, what would be better to use? Gird or Flex? I have like 9months till the competition.

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

Hi,

How long would it take to make a grid system? I have a competition that I will need make a website with no frameworks and. And it needs 5pages like home, about, contact, service etc.. And i have 6-7hours to make it, what would be better to use? Gird or Flex? I have like 9months till the competition.

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

Hi Konrad, there is a course on CSS Layout Techniques which covers both Grids and Flexbox methods.

A grid would have better legacy browser support.

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

Thank.you for the answer. I'm going to World Skill web design, which Is developement really with js and php, but Im thinking, if I need to do 5pages in 6hours, how much would grid system over flex box would help. I need also the best practices of naming conventions and css. Do you know where could i get best practices and what more naming conventions? I learned a lot from css tricks, learned few tricks lol xd but I can't seem to find any html naming and it's catastrophic: p i name them how I think it's good, i discovered that sidebar should have widget so widget body, widget header etc.. Have container wrapper etc.. Coukd you help me this as well please?

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

Hi Konrad, all this widget talk sounds like WordPress Theming (or similar) and not something you need for class names. You want to combine semantic HTML markup with appropriate class names. CSS Tricks has an article on this.

If you are using a framework or CMS like WordPress then you may need to add in additional classes to work with them.