0

I have the following code, and I have two problems with it:

  1. it's not dynamic; I am adding cards and they are lost in the page (going left not down), and
  2. there is very big padding in the cards, how can I cancel it?

#grid {
  column-width: 100px;
  grid-column-gap: 10px;
  column-gap: 16px;
  background-color: rgb(207, 232, 220);
  padding: 10px;
  margin: 0 0 1em 0
}

#grid>div {
  break-inside: avoid-column;
  /* Prevent element from breaking */
  page-break-inside: avoid;
  /* Prevent element from breaking in Firefox */
  background: green;
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<ng-container *ngFor="let dashboard of dashboards; trackBy: trackByFn">
  
  <div id="grid">
    <div>
      <a class="ml-1 text-primary-500 hover:underline" [routerLink]="['/','apps','reports','dashboard-management',dashboard.engNameKey]"> {{dashboard.hebName}}</a>
      <span>TEST</span>
      <span>TEST</span>
    </div>
  </div>
  
</ng-container>

the guid:

David Thomas
  • 249,100
  • 51
  • 377
  • 410
NEW ANGULAR LOVER
  • 1
  • 1
  • If you could include the relevant Angular code in the Snippet I've created from your posted code that might help us to see, and understand, your problem better (allowing us to reproduce your problem helps us to understand what's happening, mistakes/misunderstandings that may have been made, and lets us show you a practical solution that's of use to you and future visitors). Please, take the [tour], and read both the "*[ask]*" and "*[mcve]*" guidelines. – David Thomas Feb 22 '23 at 21:57

0 Answers0