tailwindcss 系列 Grid template Rows

template rows

效果

代码

 <div class="h-64 grid grid-rows-3 grid-flow-col gap-4">

 <div

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

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

 :key="index"

 >

 {{ index + 1 }}

 </div>

 </div>

  

 <div class="h-64 grid grid-rows-2 grid-flow-col gap-4 mt-5">

 <div

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

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

 :key="index"

 >

 {{ index + 1 }}

 </div>

 </div>

Spanning rows

效果

代码

 <div class="grid grid-rows-3 grid-flow-col gap-4 h-64">

 <div class="row-span-3 bg-gray-400 ..."></div>

 <div class="row-span-1 bg-gray-400 col-span-4 ..."></div>

 <div class="row-span-2 bg-gray-400 col-span-4 ..."></div>

 </div>

auto row

效果

代码

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

 <div

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

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

 :key="index"

 >

 {{ index + 1 }}

 </div>

 </div>