顺风CSS -如何制作一个有两列的网格，其中第一列有20%的宽度，第二列有80%的宽度？
顺风CSS -如何制作一个有两列的网格，其中第一列有20%的宽度，第二列有80%的宽度？
提问于 2021-04-24 11:33:18
从官方文档中，我只能想出这样的东西：
<div class="grid grid-cols-2 gap-3">
<div>1st col</div>
<div>2nd col</div>
</div>但是这给了我两个宽度相等的列--我如何指定第一列是总宽度的20% (我只需要在那里放置一个简单的图标)，其余的宽度将是第二列(这里将是一个文本)？
提前谢谢你。
回答 3
Stack Overflow用户
回答已采纳
发布于 2021-04-24 11:41:02
将grid-cols-5设置为包装器，将col-span-4设置为第二列。它将涵盖4/5 (80%)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" />
<div class="grid grid-cols-5 gap-3">
<div class="bg-blue-100">1st col</div>
<div class="bg-red-100 col-span-4">2nd col</div>
</div>
使用grid-flow-col的另一种方式
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" />
<div class="grid grid-flow-col gap-3">
<div class="bg-blue-100 col-span-1">1st col</div>
<div class="bg-red-100 col-span-4">2nd col</div>
</div>
Stack Overflow用户
发布于 2021-04-24 11:42:53
您可以像下面这样使用col-span
<div class="grid grid-cols-5 gap-3"> // This will create 5 grids so 20% each
<div class="some-class"></div>
<div class="col-span-4"></div> // This will take 80% of space
</div>Stack Overflow用户
发布于 2021-10-11 14:50:28
您可以通过在tailwind.config.js中扩展主题来定义其他实用程序
module.exports = {
theme: {
extend: {
gridTemplateColumns:
{
'20/80': '20% 80%',
'fixed': '40px 260px',
}
}
}
}<div class="grid grid-cols-20/80 w-full h-64">
<div class="bg-blue-500"></div>
<div class="bg-red-500"></div>
</div>
<div class="grid grid-cols-fixed h-64">
<div class="bg-blue-500"></div>
<div class="bg-red-500"></div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67242334
复制相关文章
相似问题
腾讯云开发者
