Creating a simple CSS grid

Question

I am creating a very simple template for my company that includes a simple grid system. I'm following this tutorial to create said system: http://css-tricks.com/dont-overthink-it-grids/

Well I've written some code, and modified it a little bit, and all of my columns are running together in the grid. I'm trying to add 20 pixels of padding to the left of each column, but it seems like that's not working.

You can see a live version of my HTML and CSS here: http://jsfiddle.net/EQ67e/

Here is my HTML code:

<body class="container center">
    <div class="grid">
        <div class="col-1"></div>
    </div><!-- .grid -->

    <div class="grid">
        <div class="col-1-3"></div>

        <div class="col-2-3"></div>
    </div><!-- .grid -->

    <div class="grid">
        <div class="col-1-2"></div>

        <div class="col-1-2"></div>
    </div><!-- .grid -->

    <div class="grid">
        <div class="col-1-3"></div>

        <div class="col-1-3"></div>

        <div class="col-1-3"></div>
    </div><!-- .grid -->

    <div class="grid">
        <div class="col-1-4"></div>

        <div class="col-1-4"></div>

        <div class="col-1-2"></div>
    </div><!-- .grid -->

    <div class="grid">
        <div class="col-1-4"></div>

        <div class="col-1-4"></div>

        <div class="col-1-4"></div>

        <div class="col-1-4"></div>
    </div><!-- .grid -->

    <div class="grid">
        <div class="col-1-8"></div>

        <div class="col-1-8"></div>

        <div class="col-1-8"></div>

        <div class="col-1-8"></div>

        <div class="col-1-4"></div>

        <div class="col-1-4"></div>
    </div><!-- .grid -->

    <div class="grid">
        <div class="col-1-8"></div>

        <div class="col-1-8"></div>

        <div class="col-1-8"></div>

        <div class="col-1-8"></div>

        <div class="col-1-2"></div>
    </div><!-- .grid -->

    <div class="grid">
        <div class="col-1-8"></div>

        <div class="col-1-8"></div>

        <div class="col-1-8"></div>

        <div class="col-1-8"></div>

        <div class="col-1-8"></div>

        <div class="col-1-8"></div>

        <div class="col-1-8"></div>

        <div class="col-1-8"></div>
    </div><!-- .grid -->
</body><!-- .container -->

Here is the CSS:

@charset "UTF-8";

/*
 * Global
 */
html, html a { 
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);

    font-smooth: always;
    -webkit-font-smoothing: antialiased;
}

body { 
    font-size: 1em;

    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.left { float: left; }

.right { float: right; }

.center { margin: 0 auto; }

/* Typography */
h1 { font-size: 2em; }

h2 {    font-size: 1.75em; }

h3 { font-size: 1.25em; }

h4 { font-size: 1em; }

ul { list-style: none; }

ul li { display: inline; }

img { border: none; }

strong { font-weight: bold; }

em { font-style: italic; }

input { -webkit-appearance: none; }

a:active, a:active *,
a:focus, a:focus *,
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
    -moz-outline-style: none;
}

/* Selection Styles */
*::selection {
    background: #666;
    color: #fff;
}

*::-moz-selection {
    background: #666;
    color: #fff;
}

*::-webkit-selection {
    background: #666;
    color: #fff;
}

/* Grid */
*, *:after, *:before {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.grid { 
    background: #ccc;
    margin: 0 0 20px -20px; 
}

.grid:after {
    clear: both;
    content: "";
    display: table;
}

/* Grid Gutters */
[class*='col-'] {
    background: red;
    float: left;
    height: 25px;
    padding-left: 20px;
}

.grid-pad { padding: 20px 0 20px 20px; }

.grid-pad [class*='col-']:last-of-type { padding-right: 20px; }

/* Grid Columns */
.col-1 { width: 100%; }

.col-2-3 { width: 66.66%; }

.col-1-2 { width: 50%; }

.col-1-3 { width: 33.33%; }

.col-1-4 { width: 25%; }

.col-1-8 { width: 12.5%; }

Does anyone have any idea where I might be going wrong? I think it may be something super super simple, but I feel like I followed that tutorial properly.

I appreciate any and all help from you folks, thanks for taking the time to read this and respond.

[class*='col-'] this is overly useless. could have simply had multiple classes. — user1721135
– user1721135, Commented Aug 2, 2013 at 21:29

Matto · Accepted Answer · 2013-08-02 21:28:22Z

2

Your padding exists on the items, you don't see it as you have a red background and padding works inside the box. If you add a margin instead of padding you will see the gaps, as margins work outside the box. Now, because you are floating the columns left you will not be able to add padding to the objects all the way at the left. You could do that by adding a margin-left or padding-left on the container class.

answered Aug 2, 2013 at 21:28

Matto

2363 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Keenan Payne Over a year ago

Wow okay, that makes perfect sense, I completed spaced thinking of those divs using the "box model". So given my padding on the columns and my negative padding on the grid class, should I choose to use padding or margins for developing this grid system?

Matto Over a year ago

depends on what you want to show. If you are going to have images or backgrounds that are going to but up to each other, then use padding to indent the content. It really depends on the design and look you are going for.

Collectives™ on Stack Overflow

Creating a simple CSS grid

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related