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