tailwindcss 系列 Grid template columns

template columns

效果

代码

 <div class="grid grid-cols-3  gap-4 ">

 <div

 v-for="(item, index) in 24"

 class="bg-gray-400 odd:bg-gray-700 p-4 text-center"

 :key="index"

 >

 {{ index + 1 }}

 </div>

 </div>

  

 <div class="grid grid-cols-12  gap-4 mt-10">

 <div

 v-for="(item, index) in 21"

 class="bg-gray-400 odd:bg-gray-700 p-4 text-center"

 :key="index"

 >

 {{ index + 1 }}

 </div>

 </div>

Responesive

效果

代码

 <div

 class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"

 >

 <div

 v-for="(item, index) in 21"

 class="bg-gray-400 odd:bg-gray-700 p-4 text-center"

 :key="index"

 >

 {{ index + 1 }}

 </div>

 </div>