tailwindcss 系列 Grid template Rows

时间:2020-9-12 作者:admin

template rows

效果

tailwindcss 系列 Grid 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

效果

tailwindcss 系列 Grid template 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

效果

tailwindcss 系列 Grid template Rows

代码

<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>
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。