[Grid] Fix flex-direction inheritance on column grid

[fstanis]

Consider the following code:

<div class="ui two column wide middle aligned grid">
    <div class="column">
        <div class="ui two column wide grid">
            <div class="column">grid item</div>
            <div class="column">grid item</div>
        </div>
    </div>
    <div class="column">grid item</div>
</div>

Since there are two columns inside a column of a two column grid, one would expect to get three grid item blocks, where the third is as wide as the first two combined. However, in this specific case, this doesn't happen, and the two items in the nested grid appear one below the other.

I've created a fiddle to demonstrate this, as well as two examples where this doesn't happen - it only happens when the parent grid is middle aligned and when the nested grid has a given column width, i. e. two column wide.

[jlukic]

This is a bug, caused by flex-direction: column being inherited on grid.
In this line.

It should read

.ui.grid > [class*="middle aligned"].column:not(.row):not(.grid) 

As a side note from your example, the keyword for column sizing is (x) column not (x) column wide. This doesn't affect the bugs appearance but is worth noting.
http://jsfiddle.net/ng49ebq1/

[jlukic]

Fixed in 2.1