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:

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.

Matto · Accepted Answer

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.

Creating a simple CSS grid

Answers (1)

Related Questions