Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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,109 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

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.