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.

Answer 2

In your case, you can use last-child property. But you need to find the odd last element, because even last element no need to come in center place. So you can use it in the following way.

.col-xs-6
{
  display:inline-block;
  text-align:center;
}
.col-xs-6:nth-last-child(1):nth-child(odd) { /* This will find last child with odd element */
  display:inline-block;
  text-align:center;
  width:100%;
}

DEMO