N-by-2 grid, and if the last row has only a single column, center it

Question

I want to have an N-by-2 grid like this, in which some elements (columns) might be set to display:none based on run-time factors, making the number of rows and colu

Answer 1

JSfiddle Demo - Option 1

Note this requires not using floats and switching to display:inline-block.

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.row {
    text-align: center;
    font-size:0;
}

.col-xs-6 {
    float:none;
    font-size:1rem;
    display: inline-block;
    width:50%;
    border:1px solid grey;
}

JSfiddle - Option 2

Using standard floats and clearing the last one.

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.row {
}

.col-xs-6 {

    border:1px solid grey;
}

.col-xs-6:nth-last-child(1):nth-child(odd) {
    clear:both;
    float:none;
    margin:0 auto;
}

EDIT: See Suresh's comment about the last child needing to be odd. Updated.