Most 'elegant' way to make 2x2 box of divs

Question

I've built a "Buzzfeed-like" quiz app with four answer choices for each question. On mobile I'm very pleased by the layout (a 2x2 box). However, on desktop the answers are simply displaying as 4 choices horizontally across the screen. The main issue is that I'm using Angular to generate all the questions and answer choices, which makes styling a bit trickier. Any ideas on how to 'elegantly' code the html/css so it always displays the answer choices as a 2x2 box? I've attempted to use media queries, but it feels like putting a bandaid on a large wound.

Current code and images below:

HTML:

<div class="jumbotron text-center" ng-hide="quizComplete">
    <h3>{{ questions[number].ask }}</h3>
    <div class="row">
        <div ng-repeat="answer in questions[number].answers" class="choice">
            <div ng-click="recordChoice(answer.points)">
                <span class="centerer"></span>
                <span class="centered">{{ answer.choice }}</span>
            </div>
        </div>
    </div>
</div>

CSS:

.choice {
    position: relative;
    display: inline-block;
    width: 128px;
    height: 128px;
    margin: 8px;
    background: rgba(183,222,237,1);
    background: -moz-linear-gradient(45deg, rgba(183,222,237,1) 0%, rgba(33,180,226,1) 49%, rgba(113,206,239,1) 92%, rgba(183,222,237,1) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(183,222,237,1)), color-stop(49%, rgba(33,180,226,1)), color-stop(92%, rgba(113,206,239,1)), color-stop(100%, rgba(183,222,237,1)));
    background: -webkit-linear-gradient(45deg, rgba(183,222,237,1) 0%, rgba(33,180,226,1) 49%, rgba(113,206,239,1) 92%, rgba(183,222,237,1) 100%);
    background: -o-linear-gradient(45deg, rgba(183,222,237,1) 0%, rgba(33,180,226,1) 49%, rgba(113,206,239,1) 92%, rgba(183,222,237,1) 100%);
    background: -ms-linear-gradient(45deg, rgba(183,222,237,1) 0%, rgba(33,180,226,1) 49%, rgba(113,206,239,1) 92%, rgba(183,222,237,1) 100%);
    background: linear-gradient(45deg, rgba(183,222,237,1) 0%, rgba(33,180,226,1) 49%, rgba(113,206,239,1) 92%, rgba(183,222,237,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#b7deed', GradientType=1 );
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    cursor: pointer;
    cursor: hand;
}

.choice div {
    position: absolute;
    background: transparent;
    width: 100%;
    height: 100%;
    padding: 5px;
    top: 0;
    left: 0;
    text-decoration: none; /* No underlines on the link */
    z-index: 10; /* Places the link above everything else in the div */
}

.centerer {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.centered {
    display: inline-block;
    vertical-align: middle;
    color: white;
}

mobile view (preferred):

desktop view (wish to look like mobile view):

Answer 1

The simplest solution with the markup you have is to set the width of the row. Your selections are 128px with a total margin of 16px so set the width of row to double that, and maybe a little more to allow for the approximately 4px of whitespace added between inline(-block) elements.

.row
{
     width:300px;
}

Demo

I wouldn't say this is the most elegant solution, just the simplest fix without refactoring your code. You could also experiment with float:left instead of inline block with .choice:nth-child(odd){clear:both} to get every other element to start on a new row.

Demo

Answer 2

Most elegant? maybe a framework

Bootstrap

to achive that this would work

<div clas="row">
    <div class="col-md-3 col-xs-6">
        1
    </div>
    <div class="col-md-3 col-xs-6">
        2
    </div>
    <div class="col-md-3 col-xs-6">
        3
    </div>
    <div class="col-md-3 col-xs-6">
        4
    </div>

</div>

Answer 3

There are a couple of solutions using angular, but perhaps the simplest is to insert a line break at the beginning of the 3rd element.

<br ng-if="($index) % 2 == 0 && $index != 0"/>

When using ng-repeat, angular has a local scope variable called $index, which increments each time it repeats. We preform some modular division on it, and make sure it doesn't display on the first index, and you have what you need.

<div class="jumbotron text-center" ng-hide="quizComplete">
    <h3>{{ questions[number].ask }}</h3>
    <div class="row">
        <div ng-repeat="answer in questions[number].answers" class="choice">
            <br ng-if="($index) % 2 == 0 && $index != 0"/>
            <div ng-click="recordChoice(answer.points)">
                <span class="centerer"></span>
                <span class="centered">{{ answer.choice }}</span>
            </div>
        </div>
    </div>
</div>