How to Vertically Align in Zurb Foundation's XY Grid?

Question

I have some content in Zurb Foundations XY cells. In Foundation's docs on XY Grids it says:

"The XY grid works very similarly to the standard float grid, but includes a number of useful features only possible with Flexbox, like horizontal and vertical alignment, automatic sizing and a full vertical grid."

However, when I place content in my cells they do not align vertically. There seems to be no other information about this on the docs either.

Would anyone know how to make this happen?

My code is:

        <div class="grid-x">
            <div class="large-2 cell show-for-large" id="logo--large">
                <a href="/home">
                    <img src="logo.png" />
                </a>
            </div>
            <div class="large-2 cell show-for-medium-only" id="logo--medium">
                <a href="/home">
                    <img src="logo.png" />
                </a>
            </div>
            <div class="large-10 cell show-for-large" id="primary-menu-large">
                <ul class="menu medium-horizontal primary-menu">
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                </ul>
            </div>
        </div>

Answer 1

I think that large-2 is for media queries, the grid is divided into 12 columns, so if you want to have a vertical grid you have to remove the large-2 classes