깜놀하는 해므찌로

Css grid 활용 예시 본문

IT

Css grid 활용 예시

agnusdei1207 2023. 6. 9. 11:13
반응형
SMALL

<div title="중간 영역" class="flex flex-col">
        <div title="항목들" class="grid grid-cols-2 px-2 py-5 gap-2">
          <div *ngFor="let admin of admins" title="항목" class="flex flex-col w-full shadow-md rounded-md y-20 border px-3 py-2 y-3/4">
            <div class="flex flex-row justify-between cursor-pointer">
              <div>{{admin.name}}</div>
              <div>{{admin.Auth}}</div>
            </div>
            <div class="flex">
              ID
            </div>
            <div class="flex flex-row justify-between cursor-pointer">
              <div>{{admin.id}}</div>
              <div>{{admin.registeredAt}}</div>
            </div>
          </div>
        </div>

1. 항목간에 gap 을 두고 싶다면 부모 태그에 grid, grid-col 속성 사용

2. 자식 항목에서 w-full 을 주고

3. 다시 부모 항목에 gap 을 주면 끝!

반응형
LIST