Grid breaks in UIKit?

Question

UIkit

Hello.
I have these cards:

No matter how much I try to make an even grid, it's useless.
Here is the code:

<div class="uk-section">
    <div class="uk-container uk-container-large">
      <div class="uk-flex uk-flex-center uk-flex-middle">
        <div class="uk-card uk-card-default uk-child-width-1-2" uk-grid>
            <div class="uk-card-media-left uk-cover-container uk-width-1-3">
                <img src="images/home.png" alt="" uk-cover>
            </div>
            <div>
                <div class="uk-card-body">
                    <h3 class="uk-card-title">Media Left</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                </div>
            </div>
        </div>

        <div class="uk-card uk-card-default uk-child-width-1-2" uk-grid>
            <div class="uk-card-media-right uk-cover-container">
                <img src="images/home.png" alt="" uk-cover>
            </div>
            <div>
                <div class="uk-card-body">
                    <h3 class="uk-card-title">Media Right</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                </div>
            </div>
        </div>
      </div>
    </div>
  </div>

I did both through grid and through flex - 0 reactions.
I will be very grateful for your help.

Answer 1

in your case, if you add uk-grid-collapseit, it will be in a line at the same level

uk-card uk-card-default uk-child-width-1-2 uk-grid uk-grid-collapse