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

Design

Jonny Strange
Jonny Strange
6,412 Points
Posted by Jonny Strange
Jonny Strange
6,412 Points

Designing a fluid grid for 480px screen

I'm trying to design a 12 column fluid grid for 480px screen, but I don't know how big the columns and gutters should be?? Can anyone help.

ayezee33
ayezee33
16,096 Points
ayezee33
ayezee33
16,096 Points

You need to use some math to figure this out...or you can use a popular framework like Bootstrap or Foundation which has already done that for you.

So take your total width 480px and divide it by 12 = 40px

Therefore each column will be 40px wide.

Now you said you wanted to add a gutter to each column. Well if you add 10px to the left you better add 10px to the right.

Now your 40px column is 20px with a gutter of 10px left and right. According to the box model you should be putting margin:0 10px; on each column.

However, it is common to style a column with the padding handling the gutter effect. Some example code would like this

.column {
max-width:40px;
padding:0 10px;
}