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

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Good way to make a grid system?

What is a good way to think about making a three type grid system? Meaning mobile, tablet, desktop, large desktop ?

I watched treehouse videos.. but they are very simple.

And if this coudl be in Sass possibly? I can't find any tutorial on this on how to do it with Sass for these sizes.

2 Answers

David Perkins
David Perkins
9,607 Points

Are you talking about making your own grid system from scratch?

If you are, there are a few SASS mixin's that can help create simple grid systems which you can then go on and tweak how you see fit. As for the breakpoints, you can decide these yourself when you're making your grid/styling your website. There are obviously the most common breakpoints and also the mobile first approach that you can take into account but if you're just after seeing what can be done... best place to start looking would be in the SASS mixin areas in my opinion.

Link 1: https://webdesign.tutsplus.com/tutorials/a-simple-responsive-grid-made-even-better-with-sass--cms-21540

Link 2: http://thesassway.com/intermediate/simple-grid-mixins

I would also look at bourbon neat as a reference on a grid system. It's clean and Sass based, so no messy class names.

bourbon neat