The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Trouble with simple grid

  • # January 13, 2013 at 7:19 pm

    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

    This reply has been reported for inappropriate content.

    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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed