Rolling my own simple 3 column grid, where is my math going wrong?

Question

@nColumns: 3;
@sSurfaceWidth: 960px;
@sGutter: 10px;
@sBaseEntityWidth: (@sSurfaceWidth / @nColumns) - (@sGutter * 4);
@sBaseEntityHeight: 200px;

.entity {
    display: inline-block;
    position: relative;
    margin: @sGutter;

    &.small {
        width: @sBaseEntityWidth;
        height: @sBaseEntityHeight;
    }
    &.medium {
        width: (@sBaseEntityWidth * 2) + (@sGutter * 2);
        height: @sBaseEntityHeight;
    }
    &.large {
        width: (@sBaseEntityWidth * 3) + (@sGutter * 4);
        height: @sBaseEntityHeight;
    }
}

And here is the result (Yellow line added for emphasis):

enter image description here

update: Removed shadows to ensure that wasn't causing an issue.

Jonathan Nicol · Accepted Answer · 2014-05-21T20:50:02.433

It will be whitespace added between inline-block elements. When creating inline-block grids there needs to be no whitespace in your markup between each li.

This is usually achieved one of two ways. Either remove it:

<li>Item 1</li><li>Item 2</li>

Which can be formatted for readability like so:

<li>
    Item 1
</li><li>
    Item 2
</li>

Or use HTML comments to remove whitespace:

<li>Item 1</li><!--
--><li>Item 2</li>

This is the one drawback of using inline-block for layout, but once you know the trick it's not a big deal. It just makes your markup look ugly!

Another trick to using inline-block for layout: Add the declaration vertical-align:top to your .entity items. This eliminates vertical whitespace, and fixes alignment issues when the items are of varying heights.

Holy crap that was it... I'm not using li but divs. Thanks! – May 21 '14 at 20:47 — , May 21 '14 at 20:47

score 1 · Answer 2 · edited May 23 '17 at 12:05

1

Thanks to @Jonathan Nicol for the answer, but in case anyone else finds this, here is a neat way to work around this issue without compromising readability. Set the font-size to 0 on the parent element, as suggested in this SO question.

edited May 23 '17 at 12:05

Community

1
1

answered May 21 '14 at 20:51

This technique can be good in situations where you have no control over the markup. I prefer to do it in markup rather than bloat my CSS by setting a small font size then resetting it again, but it's good to have a few options up your sleeve! – Jonathan Nicol May 21 '14 at 20:54

Rolling my own simple 3 column grid, where is my math going wrong?

2 Answers2