Tailwindcss의 Grid와 Order을 사용해서 순서 변경하기

( ↑ SP화면)

( ↑ PC화면)

아래와 같은 기능을 구현하는데 Grid와 Order를 사용하였다

• PC화면에선 1 , 2 , 3 요소가 한줄로 표시된다

• SP화면에선 1 , 3이 첫번째 줄로 표시되며

  2가 두번째 줄로 표시된다

Grid와 Order을 사용하면 위와 같은 기능을 구현할수있다

• Grid를 사용하기 위해선 부모 요소에 1~12사이의 grid-col에 을 지정후 자식 요소에 col-span으로 1~12까지 분할해서 지정한다

• Order은 요소의 순서를 변경가능하며 이 예제에선 SP인가 PC인가에 따라 순서를 변경한다 ( Grid와 Flex에서 사용가능하다 )

예제

<div class="grid grid-cols-9 md:grid-cols-8">
  <div class="col-span-2 md:col-span-4 bg-red-200"> 1 </div>
  <div class="col-span-5 md:col-span-8 bg-blue-200 order-2 md:order-3"> 2 </div>
  <div class="col-span-2 md:col-span-4 bg-green-200 order-3 md:order-2"> 3 </div>
</div>

참조

동작확인

Tailwindcss Grid에 대해서

Order에 대해서