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 Achilles Angel
Achilles Angel
Courses Plus Student 5,368 Points

Grid.css

Where do i find the same grid.css format as treehouse? The one that i am using is not placing my images and elements in the place.

5 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

The grid.css file from the How to Make a Simple Website course is available at http://smellslikebakin.com/css/grid.css

Achilles Angel
Achilles Angel
Courses Plus Student 5,368 Points

Thanks James and can you please help me speed up my learnings. Thanks

Achilles Angel
Achilles Angel
Courses Plus Student 5,368 Points

I want to put same exact grid file so my practice web "Smells like Bakin'" looks the same as treehouse. Thanks

Achilles Angel
PLUS
Achilles Angel
Courses Plus Student 5,368 Points
Achilles Angel
Achilles Angel
Courses Plus Student 5,368 Points

Thanks and i download it but when i open this file its a picture not a CODE.

Aaron Arkie
Aaron Arkie
5,345 Points
Aaron Arkie
Aaron Arkie
5,345 Points 
/*
 Width: 1000px
 # Columns : 12 
 Column width: 65px
 Gutter : 20px 

 */
.grid_1 { width: 65px; }
.grid_2 { width: 150px; }
.grid_3 { width: 235px; }
.grid_4 { width: 320px; }
.grid_5 { width: 405px; }
.grid_6 { width: 490px; }
.grid_7 { width: 575px; }
.grid_8 { width: 660px; }
.grid_9 { width: 745px; }
.grid_10 { width: 830px; }
.grid_11 { width: 915px; }
.grid_12 { width: 1000px; }

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
    margin: 0 20px 10px 0;
    float: left;
    display: block;
}

.alpha{margin-left:0px;}
.omega{margin-right:0px;}

.container{
    width: 1000px; 
    margin: auto;
}



.clear{
clear:both;
display:block;
overflow:hidden;
visibility:hidden;
width:0;
height:0
}
.clearfix:after{
clear:both;
content:' ';
display:block;
font-size:0;
line-height:0;
visibility:hidden;
width:0;
height:0
}

* html .clearfix,*:first-child+html .clearfix{zoom:1}

Here you go this is the code inside the Grid.css

just make a text file, paste this code inside and rename the file Grid.css. You should be okay after that.

Achilles Angel
Achilles Angel
Courses Plus Student 5,368 Points

Thank you very much for your help. Its working fine. Where did you find this code? or How?

Aaron Arkie
Aaron Arkie
5,345 Points
Aaron Arkie
Aaron Arkie
5,345 Points

No problem at all! I did the same project about a month or two ago. If you go on a treehouse track and open up any tutorial on the right you will see a download section and under it there is a download for the project file, video transcript, and the video itself. If you download the zip file from the project you will get everything the instructor is doing inside the zip file(which is where i got the Grid.css file). If you haven't already i would recommend that you download the file associated with each video that way you can compare your code with the instructors code. However, do not simply copy and paste the instructors code rather take the time to find the error and make changes as it is more productive! I hope this helps! if you need anything else i would be glad to help you out. The best thing about the treehouse forums is everyone tries to learn together!