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 CSS Layout Techniques Grid Layout Testing our Grid

Julian Ptak
Julian Ptak
30,920 Points
Posted by Julian Ptak
Julian Ptak
30,920 Points

Debugging Grid CSS

I'm using this CSS grid system in a project of my own and it is pretty much ripped straight out of this project and yet my grid columns are not running onto the next line. For instance, to get three columns on the same line, I give three objects "grid-4". Yet they remain stubbornly in a single column along the left side of the screen. How do you debug a grid css system?

Here's some code and a fiddle to go with it:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Write Away Freelance</title>
<!--[if IE]>
<script src=&quot;http://html5shiv.googlecode.com/svn/trunk/html5.js&quot;></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/grid.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">

</head>
<body>
    <header>
        <h1>Write Away Freelance</h1>
        <h2>Therese Ptak | Freelance Writer</h2>   
    </header>
    <nav class="main-nav">
        <a href="#">Nav Link 1</a>
        <a href="#">Nav Link 2</a>
        <a href="#">Nav Link 3</a>
        <a href="#">Nav Link 4</a>
    </nav>
    <div class="main">
        <div class="grid-container">
            <div class="primary-content grid-11">
                <img src="img/profile.jpg">
                <p id="bio">Therese graduated with her B.A. in English and a Psychology minor from Mount Saint Mary's University. She has been writing for pleasure and publication for over 14 years and is a voracious reader. Her first publication was in the 6th grade. She's had short fiction published and now does mostly advertising copy, blogging and script writing. In her spare time she writes her fantasy novel, eats sushi and hikes with the love of her life. 

    Specialties: Blogging, Screen Writing, Fiction, Web Content, Television Scripts, Radio Scripts, Print Ads, Headlines, Email Blasts, Editing/Proofreading, eBook Content</p>
            </div>
        </div>
        <div class="grid-container secondary-content">
            <div id="copyEd" class="extra-content grid-4">
                <h2>Copyeditor</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum vel ipsum ac elementum. Mauris scelerisque in ligula ut vulputate. Mauris quis malesuada lacus. Pellentesque lectus dolor, tristique at ligula eget, ornare ornare neque. Pellentesque convallis leo enim, bibendum pharetra nulla bibendum quis. Sed blandit, urna vel pharetra congue, turpis nulla interdum tortor, id pulvinar dui dui vel enim. Quisque laoreet quam vehicula turpis posuere, ac laoreet erat euismod. Praesent euismod est sit amet mauris pellentesque malesuada ornare fringilla dui. Donec placerat id neque ut vehicula. Aliquam accumsan libero ipsum, nec fringilla ligula aliquam commodo. Aenean bibendum, purus ac sodales aliquam, metus enim pharetra erat, et luctus sem leo at nisl. Donec ac commodo sem, id bibendum justo. Sed scelerisque nulla eu turpis faucibus, id vestibulum est scelerisque. Fusce mattis massa porta, venenatis nulla quis, suscipit orci.</p>
            </div>
            <div id="freelance" class="extra-content grid-4">
                <h2>Freelance</h2>
                <p>Aliquam erat volutpat. Nunc non libero nec sem suscipit tristique. Sed non facilisis neque, nec euismod dui. Mauris eget accumsan leo, viverra molestie ligula. Etiam ut feugiat lectus. Suspendisse a ante lacus. Curabitur leo risus, posuere eu dui facilisis, lacinia interdum purus. Nunc sem erat, cursus id dui sit amet, aliquet aliquet augue. Donec dictum placerat eros, in dictum elit hendrerit at. Proin in velit id nulla vehicula dapibus. Donec sollicitudin posuere accumsan. Maecenas arcu magna, venenatis eu condimentum at, venenatis non magna.</p>
            </div>
            <div id="ghostWr" class="extra-content grid-4">
                <h2>Ghost Writer</h2>
                <p>Donec nibh elit, interdum vestibulum pretium nec, faucibus quis erat. Etiam in quam adipiscing, facilisis metus sit amet, tincidunt felis. Donec tincidunt odio sit amet risus blandit, vitae aliquam turpis lobortis. Etiam suscipit est mi, sed scelerisque tortor porta eu. Phasellus ornare nec neque a sodales. Aenean id luctus justo, a tincidunt nulla. Morbi eu facilisis velit. Aenean eros leo, tincidunt in odio a, scelerisque tincidunt lorem. Praesent nibh ligula, imperdiet at mattis nec, sagittis ut dui.</p>
            </div>
        </div>
    </div>
    <footer class="grid-12">
        <p>Copyright Information Goes Here</p>
    </footer>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
        var  mn = $(".main-nav");
        mns = "main-nav-scrolled";

        $(window).scroll(function() {
          if( $(this).scrollTop() > 250 ) {
            mn.addClass(mns);
          }
          else {
            mn.removeClass(mns);
          }
        });
    </script>
</body>
</html>

And here's the CSS not from the grid.css:

body {
     font: 1em/1.5 sans-serif;
     color: #444135;
}
p {
     margin-bottom: 24px;
}
header, .main-nav {
   text-align: center;
}
header {
  color: #f7f8ee;
}
.main-nav a {
 font-size: .9em; 
 text-decoration: none;
 font-weight: bold;
 text-transform: uppercase;
 color: #444135;
 display: inline-block;
 margin: 24px 12px;
}
.main-nav a:first-child {
   border-top: 2px solid #f07057;
   padding-top: 10px;
}
.main h2 {
   column-span: all;
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding-top: 250px;
}
header {
  height: 300px;
  padding-top: 50px;
  background: #f07057;
  position: fixed;
  top: 0;
  width: 100%;
}

.main, .main-nav {
  position: relative; 
}
.main-nav {
  background: #fff;
  height: 80px;
  z-index: 150;
  margin-bottom: -80px;
  box-shadow: 0 2px 3px rgba(0,0,0,.4);
}
header,
.main-nav-scrolled {
  position: fixed;
  width: 100%;
  top: 0;
}
.main {
  background: #f2f2e8;
  padding: 110px 50px 50px;
  column-count: 2;
  column-gap: 40px;
}

img {
    max-width: 150px;
    border-radius: 100%;
}

If you'd like, I can post the grid.css file as well. Thanks so much for taking a look at it, Guil!

5 Answers

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Julian Ptak - The way this grid works, you'll need to add the grid- value before all others in the class attribute. For example: <div class="grid-4 extra-content">

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Julian Ptak – Can you please post a code snippet? :)

Julian Ptak
Julian Ptak
30,920 Points
Julian Ptak
Julian Ptak
30,920 Points

http://jsfiddle.net/Fqf4a/

This code must look awfully familiar to you, Guil. :) Thanks in advance for all your help. I really appreciate it.

Julian Ptak
Julian Ptak
30,920 Points
Julian Ptak
Julian Ptak
30,920 Points

http://jsfiddle.net/Fqf4a/

This code must look awfully familiar to you, Guil. :) Thanks in advance for all your help. I really appreciate it.

I'm sure it's something really simple. I've done quite a lot of "watching" on Team Treehouse but not as much actual coding so I'm still pretty new to all this.

Julian Ptak
Julian Ptak
30,920 Points
Julian Ptak
Julian Ptak
30,920 Points

Thanks, Guil! That did the trick! I appreciate it.