<div class="uk-section uk-height-viewport uk-flex uk-flex-middle">
    <div class="uk-container uk-flex-auto">

        <ul class="uk-grid-small uk-grid-match uk-child-width-expand" uk-grid>
            <li class="uk-width-small"><div class="uk-card uk-card-small uk-card-body uk-card-primary">Small</div></li>
            <li><div class="uk-card uk-card-small uk-card-body uk-background-muted"></div></li>
        </ul>

        <ul class="uk-grid-small uk-grid-match uk-child-width-expand" uk-grid>
            <li class="uk-width-medium"><div class="uk-card uk-card-small uk-card-body uk-card-primary">Medium</div></li>
            <li><div class="uk-card uk-card-small uk-card-body uk-background-muted"></div></li>
        </ul>

        <ul class="uk-grid-small uk-grid-match uk-child-width-expand" uk-grid>
            <li class="uk-width-large"><div class="uk-card uk-card-small uk-card-body uk-card-primary">Large</div></li>
            <li><div class="uk-card uk-card-small uk-card-body uk-background-muted"></div></li>
        </ul>

        <ul class="uk-grid-small uk-grid-match uk-child-width-expand" uk-grid>
            <li class="uk-width-xlarge"><div class="uk-card uk-card-small uk-card-body uk-card-primary">X-Large</div></li>
            <li><div class="uk-card uk-card-small uk-card-body uk-background-muted"></div></li>
        </ul>

        <ul class="uk-grid-small uk-grid-match uk-child-width-expand" uk-grid>
            <li class="uk-width-xxlarge"><div class="uk-card uk-card-small uk-card-body uk-card-primary">XX-Large</div></li>
            <li><div class="uk-card uk-card-small uk-card-body uk-background-muted"></div></li>
        </ul>

    </div>
</div>