Grow your CSS skills. Land your dream job.

Trouble with simple grid

  • # January 13, 2013 at 7:19 pm

    http://codepen.io/nathangross/full/jwArH

    I’m trying to figure out how to create a simple grid similar to Chris Coyier’s “Don’t Overthink it Grid” but I seem to be missing something. My boxes are 25%. Why don’t the 4 boxes fit across the parent container? 25%+25%+25%+25% = 100%, no?

    It appears to have to do with the margin but I thought this resolved that:

    `* {
    @include box-sizing(border-box);
    }`

    # January 13, 2013 at 7:25 pm

    Border box works on padding, how you have it now, each element is 25% + 20px because of the margins, so right now it’s 100% + 80px, I’d fork your pen if I wasn’t on my phone right now.

    # January 13, 2013 at 9:43 pm

    Ah, got it. I didn’t realize border box didn’t affect margin. It makes sense now that I think about it. Thanks ChrisP. Pen is updated.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".