What the Heck is Going On With My CSS Grid?

Question

So I'm building a site that uses the grid system that Guil Hernandez built in the CSS Layout Technique and I have come across a weird and annoying bug.

I have copy and pasted the grid directly from the project downloads so I know it is a working version.

What I am experiencing is when I call two .grid-6 and wrap text in a paragraph tag, even without a paragraph tag it still drops a line the second grid column will drop down a line (see code pen)

I'm not sure what's happening here, but it has to be something dumb as the same grid system works perfectly fine with other projects.

I will attach the code I have used too.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Loveday Spa</title>

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="grid-container">
            <div class="grid-6">
                grid 1
            </div>
            <div class="grid-6">
                grid 2
            </div>
        </div>
    </body>

/* Global
================================ */

.grid-container {
    padding-left: 10px;
    padding-right: 10px;
    margin-left: auto;
    margin-right: auto;
}
img {
    width: 100%;
}

/* Media Queries
================================ */

@media (min-width: 1px) and (max-width: 767px)  {
    .grid-container > [class^="grid-"] {
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .hide-mobile {
        display: none;
    }
}

@media (min-width: 768px) {

    /* Columns
    ================================ */

    .grid-container > [class^="grid-"] {
        float: left;
        min-height: 1px;
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 2%;
    }
    .grid-container > [class^="grid-"]:first-child {
        margin-left: 0;
    }
    .grid-container > [class^="grid-"]:last-child {
        float: right;
    }

    /* Columns are 65px wide, with 20px gutters
    =========================================== */

    .grid-1 {
        width: 6.5%;
    }
    .grid-2 {
        width: 15%;
    }
    .grid-3 {
        width: 23.5%;
    }
    .grid-4 {
        width: 32%;
    }
    .grid-5 {
        width: 40.5%;
    }
    .grid-6 {
        width: 49%;
    }
    .grid-7 {
        width: 57.5%;
    }
    .grid-8 {
        width: 66%;
    }
    .grid-9 {
        width: 74.5%;
    }
    .grid-10 {
        width: 83%;
    }
    .grid-11 {
        width: 91.5%;
    }
    .grid-12 {
        width: 100%;
    }

    /* Clearfix
    ================================ */

    .grid-container:after,
    .group:after {
      content: " ";
      display: table;
      clear: both;
    }
}
@media (min-width: 1200px) {
    .grid-container {
        max-width: 1100px;
    }
}

I would have included the normalize.css but there's a bit too much code there.

Any advice on how I can fix this would be greatly appreciated.

Stu : )

Answer 1 · 2015-07-08T05:43:26Z

July 8, 2015 5:43am

It's the padding on .grid-container > [class^="grid-"] that's throwing it off. Try adding box-sizing: border-box; to .grid-container > [class^="grid-"]

.grid-container > [class^="grid-"] {
    box-sizing: border-box;
    float: left;
    min-height: 1px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 2%;
}

Forked codepen with colored backgrounds

Welcome to the Treehouse Community

Looking to learn something new?

Stu Cowley

Stu Cowley

What the Heck is Going On With My CSS Grid?

1 Answer

Colin Bell

Colin Bell