Cannot get Clarity Cards to appear in single row

Question

I am able to add a card however when I try and add multiple cards in a row they stack below each other. The documentation is not clear what other steps are required to make these appear on the same row. I am happy to manually do this with blocking, set width and height etc however my understanding was this would be dynamic, am I misunderstanding the template or doing something stupid?

<div class="row">
<ng-template ngFor let-tile [ngForOf]="tiles" let-i="index" 
  [ngForTrackBy]="trackByFn">
  <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
    <a href={{tile.url}} class="card clickable">
      <div class="card-img">
        <img src={{tile.icon}} alt="..." height="42" width="42"/>
      </div>
      <div class="card-block">
        <p class="card-text">
          {{tile.text}}
        </p>
      </div>
      </a>
    </div>
  </ng-template>
</div>

Answer 1

The old grid was deprecated as part of Clarity's 1.0 release:

Deprecation of old grid (#2757)

Clarity has had deprecated the old grid already, but has actually removed it from the main @clr/ui bundles. If you are still using the old grid (which includes the old unprefixed .row and .col classes), we have provided a temporary file you can include until you fully migrate to the new grid classes. To do this, add @clr/ui/clr-grid-deprecated.css to your project.

So you can either import this CSS file to still use the deprecated classes, or move the the new grid: https://vmware.github.io/clarity/documentation/v1.0/grid The difference with the new gird is pretty much just prefixing the various classes with clr-.