Add dynamic margins using UI Kit

I need to add margin between the cards, but only internal margins.

The code below is responsive.

Large Screens has 4 Cards.
Medium Screens has 3 Cards.
Small Screens has 2 Cards.
Micro Screens has 1 Cards.

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/css/uikit-core-rtl.css" rel="stylesheet"/>

<div class="uk-flex uk-flex-center uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l uk-flex-wrap">
    <div class="uk-card uk-card-primary uk-card-body">Foo</div>
    <div class="uk-card uk-card-primary uk-card-body">Foo</div>
    <div class="uk-card uk-card-primary uk-card-body">Foo</div>
    <div class="uk-card uk-card-primary uk-card-body">Foo</div>
    <div class="uk-card uk-card-primary uk-card-body">Foo</div>
    <div class="uk-card uk-card-primary uk-card-body">Foo</div>
    <div class="uk-card uk-card-primary uk-card-body">Foo</div>
    <div class="uk-card uk-card-primary uk-card-body">Foo</div>
    <div class="uk-card uk-card-primary uk-card-body">Foo</div>
    <div class="uk-card uk-card-primary uk-card-body">Foo</div>
    <div class="uk-card uk-card-primary uk-card-body">Foo</div>
    <div class="uk-card uk-card-primary uk-card-body">Foo</div>
    <div class="uk-card uk-card-primary uk-card-body">Foo</div>
    <div class="uk-card uk-card-primary uk-card-body">Foo</div>
    <div class="uk-card uk-card-primary uk-card-body">Foo</div>
    <div class="uk-card uk-card-primary uk-card-body">Foo</div>
    <div class="uk-card uk-card-primary uk-card-body">Foo</div>
    <div class="uk-card uk-card-primary uk-card-body">Foo</div>
    <div class="uk-card uk-card-primary uk-card-body">Foo</div>
    <div class="uk-card uk-card-primary uk-card-body">Foo</div>
    <div class="uk-card uk-card-primary uk-card-body">Foo</div>
    <div class="uk-card uk-card-primary uk-card-body">Foo</div>
    <div class="uk-card uk-card-primary uk-card-body">Foo</div>
    <div class="uk-card uk-card-primary uk-card-body">Foo</div>
    <div class="uk-card uk-card-primary uk-card-body">Foo</div>
    <div class="uk-card uk-card-primary uk-card-body">Foo</div>
    <div class="uk-card uk-card-primary uk-card-body">Foo</div>
    <div class="uk-card uk-card-primary uk-card-body">Foo</div>
</div>

I want to add margins between the cards dynamically. What is the best way?

Large Screens has 4 Cards.
- Margin left for the second, the third, and the fourth card card.
Medium Screens has 3 Cards.
- Margin left for the second and the third card.
Small Screens has 2 Cards.
- Margin left for the second card.
Micro Screens has 1 Cards.
- Without margins

I want to solve this with CSS or UI Kit classes.

Solution

I don't think UIkit offers special margin classes based on the screen size but you can target them using media queries like this. If you add a margin to the columns, it will wrap to a new row. You can try to mimic the margin by using a white border on the left.

@media (min-width: 1200px) { /* Large screen width in UI Kit */
  .uk-card:nth-of-type(4n+2), .uk-card:nth-of-type(4n+3), .uk-card:nth-of-type(4n+4) { /* Select the 2nd, 3rd and 4th element of the row when showing 4 columns */
    border-left: 10px solid white;
  }
}

@media (min-width: 960px)  and (max-width: 1200px) { /* Medium screen width in UI Kit */
  .uk-card:nth-of-type(3n+2), .uk-card:nth-of-type(3n+3) { /* Select the 2nd, 3rd element of the row when showing 3 columns */
    border-left: 10px solid white;
  }
}

@media (min-width: 640px)  and (max-width: 960px) { /* Small screen width in UI Kit */
  .uk-card:nth-of-type(2n+2) { /* Select the 2nd element of the row when showing 2 columns */
    border-left: 10px solid white;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/css/uikit-core-rtl.css" rel="stylesheet" />

<div class="uk-flex uk-flex-center uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l uk-flex-wrap">
  <div class="uk-card uk-card-primary uk-card-body">Foo</div>
  <div class="uk-card uk-card-primary uk-card-body">Foo</div>
  <div class="uk-card uk-card-primary uk-card-body">Foo</div>
  <div class="uk-card uk-card-primary uk-card-body">Foo</div>
  <div class="uk-card uk-card-primary uk-card-body">Foo</div>
  <div class="uk-card uk-card-primary uk-card-body">Foo</div>
  <div class="uk-card uk-card-primary uk-card-body">Foo</div>
  <div class="uk-card uk-card-primary uk-card-body">Foo</div>
  <div class="uk-card uk-card-primary uk-card-body">Foo</div>
  <div class="uk-card uk-card-primary uk-card-body">Foo</div>
  <div class="uk-card uk-card-primary uk-card-body">Foo</div>
  <div class="uk-card uk-card-primary uk-card-body">Foo</div>
  <div class="uk-card uk-card-primary uk-card-body">Foo</div>
  <div class="uk-card uk-card-primary uk-card-body">Foo</div>
  <div class="uk-card uk-card-primary uk-card-body">Foo</div>
  <div class="uk-card uk-card-primary uk-card-body">Foo</div>
  <div class="uk-card uk-card-primary uk-card-body">Foo</div>
  <div class="uk-card uk-card-primary uk-card-body">Foo</div>
  <div class="uk-card uk-card-primary uk-card-body">Foo</div>
  <div class="uk-card uk-card-primary uk-card-body">Foo</div>
  <div class="uk-card uk-card-primary uk-card-body">Foo</div>
  <div class="uk-card uk-card-primary uk-card-body">Foo</div>
  <div class="uk-card uk-card-primary uk-card-body">Foo</div>
  <div class="uk-card uk-card-primary uk-card-body">Foo</div>
  <div class="uk-card uk-card-primary uk-card-body">Foo</div>
  <div class="uk-card uk-card-primary uk-card-body">Foo</div>
  <div class="uk-card uk-card-primary uk-card-body">Foo</div>
  <div class="uk-card uk-card-primary uk-card-body">Foo</div>
</div>