Reordering with Grid and Order in Tailwindcss

sp( ↑ SP화면)


pc( ↑ PC화면)





Grid and Order were used to implement the following functions

  • On the PC screen, 1, 2, and 3 elements are displayed in one line

  • On the SP screen, 1, 3 are displayed as the first line and

    2 is displayed as the second line


Grid and Order can be used to implement the above functions

  • To use Grid, specify grid-col between 1 and 12 in the parent element, and then divide the child element by col- span from 1 to 12.span from 1 to 12 to the child elements

  • Order can change the order of elements, and in this example, the order is changed according to whether it is SP or PC (available in Grid and Flex)


Example

<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>




Reference

Check the behavior

Tailwindcss Grid

Order

Jun 10, 2024 Views 156