깜놀하는 해므찌로

CSS 줄바꿈 grid 본문

IT

CSS 줄바꿈 grid

agnusdei1207 2023. 4. 19. 14:24
반응형
SMALL
<div title="항목들" class="grid grid-cols-3 gap-2">
  <div
    [id]="pageId"
    *ngFor="let admin of admins | paginate:
  { itemsPerPage: pageInfo.itemsPerPage, currentPage: pageInfo.currentPage, totalItems: pageInfo.totalItems}; let i = index"
    title="항목"
    class="flex flex-col justify-evenly w-[22.75rem] h-32 shadow-md rounded-md border px-4 py-2 cursor-pointer"
  >
    <div class="flex justify-between items-center py-2">
      <div class="flex gap-2.5">
        <div><img src="\assets\icon\Vector.png" /></div>
        <div class="font-bold">{{admin.name}}</div>
      </div>

      <app-badge [style]="setBadgeStyle(admin.Auth)"
        >{{admin.Auth}}</app-badge
      >
    </div>
    <div class="border border-gray-200"></div>
    <!-- 선 -->
    <div class="flex items-center text-gray-800 font-medium">
      <div>ID :</div>
      <div class="px-1">{{admin.id}}</div>
    </div>
    <div class="flex flex-row justify-between">
      <div class="text-gray-500">
        {{admin.registeredAt | date: 'YYYY-MM-dd'}} 등록 됨
      </div>
    </div>
  </div>
</div>
반응형
LIST