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 Unsubscribed User
Unsubscribed User
1,512 Points

Just getting started, how do I layout my sites (grids, flexboxes, frameworks, etc.)?

I'm just getting started in design and I'm hearing a lot about these three. Here's my general understanding of where they lie:

  • Grids - Seem somewhat complex and utilize CSS in ways not originally intended to lay content out.
  • Flexboxes - Designed to be the proper implementation of page layouts so that CSS grids are no longer necessary but since it's new support is somewhat lacking.
  • Frameworks - Layouts (most commonly grids) designed to easily and quickly get you started since designing grids from scratch is a pain.

I just wanted to confirm:

  1. Are my thoughts on these three accurate?
  2. Can I just start with flexboxes? Since I'm new I don't want to rely on frameworks (I like knowing how to do something myself) and I'd rather know what will soon be the standard instead of learning an older/more complex one that I may never end up using. I figure I won't be designing professionally for a while and by the time I am there will be plenty of support for flexboxes (and workarounds for older browsers can be programmed in if necessary.)

I've also heard that future versions of CSS will have something specifically called grid layout built-in that will make our lives much easier. Unfortunately it's definitely too far out to begin using right now.

2 Answers

Keith Wyland
Keith Wyland
10,576 Points

Hi Cody,

Flexbox is pretty new. I'll be honest, I haven't even touched it yet. The job I have, the work I do, currently calls for support of browsers that are just not going to have support for it ever. But, in a year, maybe less, maybe more, flexbox will probably be the way to layout a page. So, keep an eye on it.

I don't think grids are as hard as they are made out to be. Many frameworks have figured out how to deal with a bunch of browser compatibility issues or spacing issues, and these make grids look hard to build from scratch. But the basics aren't too difficult. Plus, speaking from a bit of experience, building a grid from scratch will give you that much more of an understanding of how CSS and HTML work together.

Relating to grids, I would recommend reading and watching Chris Coyier's blog post and screen cast called Don't Overthink It Grids over on CSS Tricks. Chris does a great job debunking the myth that the basics of a fluid CSS grid is hard. He shows how you can build one from scratch using floats.

If you decide to go further down the grid rabbit hole after that, I've made a mashup of sorts using Chris' grid tips along with csswizardry's (Harry Roberts') grid system, that you could maybe draw inspiration from.

Scott Magdalein
Scott Magdalein
2,406 Points
Scott Magdalein
Scott Magdalein
2,406 Points

Like Keith said, Flexbox support is too sparse to consider it for mainstream use just yet.

Grids/frameworks aren't too difficult to understand. My favorite simple framework is Foundation. I use it on 90% of my company's client sites.

You can always spin your own grid with some SASS variables, math, and mixins