tailwind css grid

agnusdei·2023년 10월 5일

업로드중..

<section *ngIf="contents" class="flex flex-col w-full gap-6">
  <h3>미리보기</h3>
  <div
    class="grid w-full grid-cols-2 gap-3"
    [ngClass]="{
      'grid-cols-[2fr_1fr]': contents.length % 3 === 0,
      'grid-cols-1': contents.length === 1,
    }"
  >
    <ng-container *ngFor="let content of contents; index as i; last as isLast">
      <card
        class="gap-3 aspect-video"
        [tourContent]="content"
        [ngClass]="{ 'row-span-2': contents.length % 3 === 0 && (i + 1) % 3 === 1,
        'col-span-2': contents.length % 3 !== 0 && contents.length % 2 === 1 && isLast,
      }"
      />
    </ng-container>
  </div>
</section>
profile
DevSecOps, Pentest, Cloud(OpenStack), Develop, Data Engineering, AI-Agent

0개의 댓글