<div class="uk-section uk-section-default uk-flex uk-flex-middle" uk-height-viewport>
    <div class="uk-width-1-1">
        <div class="uk-container uk-text-center">

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

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

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

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

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

        </div>
    </div>
</div>