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

HTML Build a Simple Website Styling Content Fonts and Colors

Posted by samuelk
samuelk
2,100 Points

Gridulator

How did the instructor got the css files that he used for the grid? He talked about gridulator and the next thing he did was a css file ready without giving any detail about how he got it. Any suggestions? Thanks!

6 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points
  1. Download Project Files
  2. Unzip Project Files
  3. Read about how to organize your files
  4. Read about how file paths work
  5. Find the grid.css file in the directory you created when you unzipped the project files
  6. Move the grid.css file to your CSS directory like you learned about in step 3
  7. Link your the CSS file to your HTML using the <link> tag remembering what you learned about paths
samuelk
samuelk
2,100 Points

Thanks for the reply. Important info!

Dylan Dixon
Dylan Dixon
947 Points
Dylan Dixon
Dylan Dixon
947 Points

look up grid.css and download the file, there should be that one or a similar one like it come up.

samuelk
samuelk
2,100 Points
samuelk
samuelk
2,100 Points

Thanks Dylan! I found the file and downloaded it, but it didn't make any change.

Dylan Dixon
Dylan Dixon
947 Points

What do you mean?

All that you need to do in order to activate the grid is type in the class name of it in a div wrapper around what you want to be sized in the grid.

Sorry if that doesn't make much sense haha. I hope I helped.

Dylan Dixon
Dylan Dixon
947 Points

for example

<div class="grid_1">this will be the size of grid 1</div>
<div class="grid_5">this will be the size of grid 5</div>

this will size the div into the size of the first grid in gridulator.

Make sense?

Edit: did that show up for you correctly?

Edit2: whoops I wasn't using the backticks

samuelk
samuelk
2,100 Points
samuelk
samuelk
2,100 Points

It's not the coding. It seems like the css file itself is not linking to the file that I' m working on in order for what I am doing to manifest

Dylan Dixon
Dylan Dixon
947 Points

It should work the same. Not really sure what you're saying here.

Christina Pagano
Christina Pagano
15,676 Points
Christina Pagano
Christina Pagano
15,676 Points

Usually they have all the files they use in the tutorials to download in a "project files" link. If you have the file just make sure you also use a link tag in your html head linking to the grid.css. If you are unfamiliar/ want to understand more about grid layouts, look up the CSS Layout Techniques deep dive, there's a whole section on grid layouts.

samuelk
samuelk
2,100 Points
samuelk
samuelk
2,100 Points

Thanks Christina! I'll read that section to learn more about the topic. Regards!