[FrontEnd/CSS] TailwindCSS 사용법 정리(flex, grid)

목차

---

■ flex

• flex

부모에게 flex를 주면 자식이 수평으로 나열됩니다.

<!-- flex 예제1 -->
<div class="bg-amber-400 flex">
    <div class="bg-sky-100">01</div>
    <div class="bg-sky-900">02</div>
</div>

flex 예제1 결과

• flex-1

이때, 자식에게 flex-1을 주면 해당 자식이 최대한의 너비를 갖습니다.

flex-1인 자식이 2개 이상이면 너비를 공평하게 나눠 갖습니다.

<!-- flex 예제2 -->
<div class="bg-amber-400 flex">
    <div class="bg-sky-100">01</div>
    <div class="bg-sky-300 flex-1">02</div>
    <div class="bg-sky-500">03</div>
    <div class="bg-sky-900 flex-1">04</div>
</div>

flex 예제2 결과

Flex - Tailwind CSS

---

■ Grid - 세로로 나열

• grid   grid-flow-col : 위에서 아래로 나열
• grid-rows-숫자 : 행(row) 개수 (1~12까지 있음)
• grap-숫자 : 항목(item) 간 간격 (1~12까지 있음)

<!-- Grid : 위에서 아래로 나열 -->
<div class="grid grid-rows-4 grid-flow-col gap-1">
  <div class="bg-gray-500">01</div>
  <div class="bg-amber-500">02</div>
  <div class="bg-orange-500">03</div>
  <div class="bg-red-500">04</div>
  <div class="bg-blue-500">05</div>
</div>

Grid : 위에서 아래로 나열 결과

Grid Template Rows - Tailwind CSS

---

■ Grid - 가로로 나열

• grid   grid-flow-row-dense : 왼쪽에서 오른쪽으로 나열
• grid-cols-숫자 : 열(columns) 개수 (1~12까지 있음)
• grid-rows-숫자 : 행(row) 개수 (1~12까지 있음)
• grap-숫자 : 항목(item) 간 간격 (1~12까지 있음)

<!-- Grid : 왼쪽에서 오른쪽으로 나열 -->
<div class="grid grid-flow-row-dense grid-cols-3 grid-rows-3 gap-1">
  <div class="bg-gray-300">01</div>
  <div class="bg-amber-300">02</div>
  <div class="bg-orange-300">03</div>
  <div class="bg-red-300">04</div>
  <div class="bg-blue-300">05</div>
</div>

Grid : 왼쪽에서 오른쪽으로 나열 결과

Grid Auto Flow - Tailwind CSS

---

감사합니다! :)