1. 首页
  2. IT资讯

tailwindcss 系列 Grid template Rows

template rows

效果
image.png

代码

 <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

效果
image.png
代码

 <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

效果
image.png

代码

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

本文来自投稿,不代表程序员编程网立场,如若转载,请注明出处:http://www.cxybcw.com/203114.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code