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

Kevin H. Schneider
Kevin H. Schneider
2,738 Points
Posted by Kevin H. Schneider
Kevin H. Schneider
2,738 Points

12 Colum CSS Grid — Tipps & Solutions

Hey, i'm trying to build a 12 Colum Grid system in CSS here are my values:

col-1   8.3333333%
col-2   16.6666667%
col-3   25%
col-4   33.3333333%
col-5   41.6666667%
col-6   50%
col-7   58.3333333%
col-8   66.6666667%
col-9   75%
col-10  83.3333333%
col-11  91.6666667%
col-12  100%

If i have 3 Colums than i have a problem here. I already coded a working solution but i want to start from scratch here. You have any tipps or better solution for a custom 12 colum css grid? I don't want to use things like bootstrap frameworks.

So any real world working tipps are welcome and by the way i'm thinking responsive too.

Thanks

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Hi Kevin H. Schneider, I've put your width values in a code block, just to make it a bit easier to read.

2 Answers

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Here's a good article from one of my favourite sites, CSS Tricks: Don’t Overthink It Grids.

The problem you will run into fairly early is the spacing between the columns (usually called the gutters). Keep in mind if there is some whitespace in between the HTML tags used for the columns, these can add just enough space to make everything total to more than 100%, and therefore push something onto the next line.

You might also see issues with how browsers handle sub-pixel widths, that is, when your percentage ends up with a width in pixels that isn't a whole number. Some browsers will round up, some down, etc.

Using a CSS reset might be a good start, to help get the browser inconsistencies sorted before you code your grid system.

Kevin H. Schneider
Kevin H. Schneider
2,738 Points
Kevin H. Schneider
Kevin H. Schneider
2,738 Points

This grid i have taken from another course outside of treehouse and i learned how to use it and it works. I only have a 1px free on the right site. I found a coding solution and with 3 colums i now have no missing pixel and resizes 100% perfectly.

But the reason why i asked here is there must be a better real world solution for this. So i really don't know how to start building the code structure. To have this css grid makes it easy to match things up with the grid i use in photoshop to place the content right.

I think i'm looking for a great basic foundation code for responsive and non-responsive websites to start and use again and again for every Project. And yes if its basic i can build custom things on top.

Thanks

(Thanks for the new post styling, i forgot this and i'm not sure if it was available on ipad browser/ app)

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

You could also use a CSS grid generator, of which there are many options.

Test them all out and see which one produces the code matching your working solution the best, or with the least amount of effort.