( ↑ SP화면)
( ↑ 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
Jun 10, 2024
Views 156