tailwindcss 系列 Grid template columns

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

template columns

效果

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

效果

tailwindcss 系列 Grid template columns


代码

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