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

Posted December 10, 2014 6:55pm by

CSS Grids I have no clue any training?

Hello everyone,

I am working on my site and have gone through a few of the courses on HTML, PHP and CSS. Problem is I need to learn to lay out my page and not sure how. I'm thinking grids is the way to go but with what I've played with hasn't worked yet. I can create what I want with a table but from what I got in the video is you don't use tables to format your layout.

Here is what I'm trying to do. I'm trying to create multiple entries in a list that have an image to the right with text under the image and then a sidebar to the right or the left of those items.

Something along these lines:

Here is an image representation

http://s8.postimg.org/ayrtplaqd/Format.jpg

Thanks for all your help.

Micahyah

December 10, 2014 8:11pm

I was not introduced to grids until I was late in the game. Grids are essential because when your site matches up in your website it also makes you look more professional and organized. I've been known to use a few resources other than 960.gs.

Give 'gridulator' a try download the png and add the file to your layers using any image editing software of your choice.

Resource Link: http://gridulator.com

Lately,

I've been using 'GuideGuide', which is a FREE Photoshop plugin extension to properly organize my layouts. You'll have to play around with it a bit in order to evenly distribute the number of columns and gutter widths to the overall width of your document or page layout.

Resource Link: http://guideguide.me

I know this has not entered the coding stage yet, but this is how I can visually see what kind of 12-column grid layout I'll need to produce using percentages to match things up from my document. I used to create a grid system on the fly, but time and time again I find myself spending too much time futzing around. Low fidelity wireframing in conjunction with the right grid system has saved me countless hours and making my projects look near pixel-perfect.

Happy organizing!

1 Answer

December 10, 2014 10:37pm

JJ has some great resources listed in his comment, but I also want to bring to your attention the Flexbox model. It is now supported by every modern browser and is far easier than using grids. There are courses on here that go over the Flexbox model including the CSS foundations course.

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.