Awkward Spacing Between 2 Column List Items

I have a list of ingredients in a two-column layout, using flex-box. When an ingredient is long enough to cause the text to break to a second line, it causes awkward vertical spaci

Solution 1:

To make that work using Flexbox, you need amongst other, to use flex-direction: column and give the flex container a fixed height.

Instead, for column layouts, CSS Columns is the proper way.

Stack snippet

.field-items {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}

.field-item {
}

<divclass="field-items"><divclass="field-item">
    8 ounces sugar snap peas, stringed </div><divclass="field-item">
    12 grape tomatoes, halved </div><divclass="field-item">2 tablespoons sliced almonds</div><divclass="field-item">2 tablespoons extra-virgin olive, walnut, or almond oil</div><divclass="field-item">
    2 tablespoons fruity vinegar, such as raspberry or pomegranate </div><divclass="field-item">
    ¼ teaspoon salt </div><divclass="field-item">
    1/8 teaspoon freshly ground pepper </div><divclass="field-item">
    4 cups packed mixed baby lettuce </div><divclass="field-item">
    ¼ cup snipped fresh chives (½-inch pieces) </div><divclass="field-item">
    ¼ cup chopped fresh tarragon </div></div>

Solution 2:

I've been in a similar position where I tried to do this with flex. I spent a long, long time on it and eventually found out that there is no nice way of doing it. My suggestion would be to go back to the trusty (read: awkward and annoying) float.

You just need to clean up your CSS a little and you can float the odd elements to the left and the even elements to the right (or the other way, if you so wish, but that would be kinda stupid, so I wouldn't advise doing that.

.field-item {
  width: 50%;
}

.field-item.odd {
  float: left;
}

.field-item.even {
  float: right;
}

For this, you can remove all the rules from .field-items in your CSS.

An obvious issue here is that you need to continue to add odd and even classes to the div tags, which could easily cause a bug if you do it wrong.

I hope this helps!

EDIT

As Jonathan Nicol pointed out, you can also use nth-child(odd|even) to achieve the same thing, without the need for specific classes (rendering my note above redundant.

.field-item {
  width: 50%;
}

.field-item:nth-child(odd) {
  float: left;
}

.field-item:nth-child(even) {
  float: right;
}