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 Kristina Nelson
Kristina Nelson
4,196 Points

Layout - Grid..Floats...Flex box...Position??? Whoa.

Hi,

So I've been trying to practice laying out a web page. And I'm very confused. What is the easiest/most effective means to layout a website?

Do I use the float property and position property? Should I skip that and opt for the flex box model for responsive design? Am I suppose to use grids?

It seems there are all these factors to layout - and I'm not sure if I'm suppose to somehow use all of them?

Should I not use flex box because of lack of browser support?
And if I do use it with the prefixes, will browsers accept it?

Thank in advance,

Kristina

2 Answers

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Today, I'm still using grids and floats.Grids are a tool to help you align elements on a page, floats are what is mostly used today to position elements on a page. Two different, but simple purposes.

I'm not using Flexbox today, but am anxsiouly waiting for it to have better support. I would suggest you keep your eye on this: http://caniuse.com/#search=flexbox and when you feel comfortable with the support of flexbox, start using it.

You can see what flexbox can do on this site: http://philipwalton.github.io/solved-by-flexbox/ just make sure you are using a browser that supports flexbox.

You can also see what the page looks like in a non-flexbox browser, like Firefox.

Grids are floats work together to provide today's web page layouts, and flexbox appears to be a proper solution to layouts, and is almost here as far a support goes.

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

Do I use the float property and position property? Should I skip that and opt for the flex box model for responsive design? Am I suppose to use grids?

Margin, padding & floating is the primary method. In fact "grids" are just an advanced applied method of floating. By definition a responsive website is fluid grids + flexible images + media queries so if you want to make a responsive website you have to start with a fluid grid.

Building a site using flex box is a bit like building on shifting sand, not currently recommended for production use.