我正在使用 Tailwind CSS 编写仪表板前端。我创建了页面的网格结构并将我的组件放置在其中。然而,所有列的宽度和长度都是相等的。有些组件通常需要看起来更宽,所以我添加的一些组件与 Figma 文件不匹配。我该如何解决这个问题?
我的页面的代码:
// Components
// Layouts
import DashboardLayout from "@/layouts/dashboard"
// Icons
import { BoltIcon } from '@heroicons/react/24/solid'
import { Bars3CenterLeftIcon } from '@heroicons/react/24/solid'
import { EllipsisVerticalIcon } from '@heroicons/react/24/solid'
import { Squares2X2Icon } from '@heroicons/react/24/solid'
import { CheckIcon } from '@heroicons/react/24/solid'
// Types
type Props = {}
export default function OverviewTemplate({ }: Props) {
return (
<DashboardLayout>
<div className="grid grid-cols-3 grid-rows-4 gap-x-2 gap-y-3 bg-gray-200 p-2">
<div className="min-h-[50px] rounded-lg col-span-3">
<div className="text-gray-900 text-2xl font-semibold leading-8 mb-4">Dashboard</div>
</div>
<div className="bg-white min-h-[50px] rounded-lg row-span-3">
<div className="bg-white rounded-lg row-span-3">
<div className="text-center">
<svg className="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
</svg>
<p className="text-gray-900 text-sm font-medium leading-5 mt-1">Want to see metrics for your latest video? Upload and post a video to get started.</p>
<div className="mt-6">
<button type="button" className="inline-flex items-center rounded-md border border-transparent bg-indigo-900 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
Upload Content
</button>
</div>
</div>
</div>
</div>
<div className="bg-white min-h-[50px] rounded-lg">
<div className="sm:rounded-lg">
<div className="px-4 py-5 sm:p-6">
<h3 className="text-indigo-900 text-base font-semibold leading-6">Refer to your Network</h3>
<div className="mt-2 max-w-xl text-indigo-900 text-sm font-medium leading-5 whitespace-nowrap">
<p>Earn up to 15% recurring commission.</p>
</div>
<div className="mt-5">
<button type="button" className="inline-flex items-center rounded-md border border-transparent bg-indigo-900 px-4 py-2 text-xs font-medium leading-4 text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Upload Content</button>
</div>
</div>
</div>
</div>
<div className="bg-white min-h-[50px] rounded-lg row-span-3">
<fieldset className="space-y-2">
<div className="px-4 py-5 sm:px-6 flex flex-row">
<Squares2X2Icon className="h-6 w-6 fill-indigo-500 mr-5" />
<h3 className="text-gray-900 text-base font-semibold leading-6">Gamification area</h3>
</div>
<div className="relative flex items-start border-t border-gray-200">
<div className="ml-3">
<p className="text-black text-sm font-medium leading-5 mb-3 mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div className="relative flex items-start">
<div className="ml-3">
<button type="button" className="text-gray-700 text-sm font-medium leading-5 inline-flex items-center rounded-md bg-emerald-50 border border-emerald-200 p-2">Complete your Profile</button>
</div>
</div>
<div className="relative flex items-start">
<div className="ml-3">
<button type="button" className="text-gray-700 text-sm font-medium leading-5 inline-flex items-center rounded-md border border-gray-200 p-2">Review Content Guideline</button>
</div>
</div>
<div className="relative flex items-start">
<div className="ml-3">
<button type="button" className="text-gray-700 text-sm font-medium leading-5 inline-flex items-center rounded-md border border-gray-200 p-2">Meet-up with Creator Team</button>
</div>
</div>
<div className="relative flex items-start">
<div className="ml-3 text-sm">
<button type="button" className="text-gray-700 text-sm font-medium leading-5 inline-flex items-center rounded-md border border-gray-200 p-2">Upload First Content</button>
</div>
</div>
<div className="relative flex items-start">
<div className="ml-3">
<button type="button" className="text-gray-700 text-sm font-medium leading-5 inline-flex items-center rounded-md border border-gray-200 p-2">Share Your Content on Social Media</button>
</div>
</div>
<div className="relative flex items-start">
<div className="ml-3">
<button type="button" className="text-gray-700 text-sm font-medium leading-5 inline-flex items-center rounded-md border border-gray-200 p-2">Register Affiliate Program</button>
</div>
</div>
</fieldset>
</div>
<div className="bg-white min-h-[50px] rounded-lg">
<div className="overflow-hidden bg-white shadow sm:rounded-lg">
<div className="px-4 py-5 sm:px-6 flex flex-row">
<BoltIcon className="h-6 w-6 fill-indigo-500 mr-5" />
<h3 className="text-gray-900 text-base font-semibold leading-6">What’s new on Omnicourse</h3>
</div>
<div className="px-4 py-5 sm:p-0">
<dl className="">
<div className="pt-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 border-t border-gray-200">
<dt className="text-gray-900 text-sm font-medium leading-5 whitespace-nowrap">Product Development News</dt>
</div>
<div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-gray-900 text-sm font-medium leading-5 whitespace-nowrap">Newly published Contents</dt>
</div>
</dl>
</div>
</div>
</div>
<div className="bg-white min-h-[50px] rounded-lg">
<div className="overflow-hidden shadow sm:rounded-lg">
<div className="px-4 py-5 sm:px-6 flex flex-row">
<Bars3CenterLeftIcon className="h-6 w-6 fill-indigo-500 mr-5" />
<h3 className="text-gray-900 text-base font-semibold leading-6 whitespace-nowrap">Tips & Tricks</h3>
<EllipsisVerticalIcon className="h-6 w-6 fill-gray-400 ml-20" />
</div>
<div className="px-4 py-5 sm:p-0">
<dl className="">
<div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6 border-t border-gray-200">
<dt className="text-gray-900 text-sm font-medium leading-5 whitespace-nowrap">How to Choose the best recording tool</dt>
</div>
<div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
<dt className="text-gray-900 text-sm font-medium leading-5 whitespace-nowrap">5 Steps to Generate interesting Content</dt>
</div>
<div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
<dt className="text-gray-900 text-sm font-medium leading-5 whitespace-nowrap">3 Ways to Earn Income via Omnicourse</dt>
</div>
<div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
<dt className="text-gray-900 text-sm font-medium leading-5 whitespace-nowrap">Developing Productive Habits in 3 Steps</dt>
</div>
</dl>
</div>
</div>
</div>
</div>
</DashboardLayout>
)
}
最佳答案
正如评论中所述,您可以使用 flex
而不是 grid
更好地实现此目的
输出:
代码:
<div class="flex h-screen flex-col bg-gray-300">
<div>Dashboard</div>
<div class="flex flex-1 gap-4">
<div class="flex w-2/4 items-center justify-center rounded-lg bg-orange-300">Upload content</div>
<div class="mb-7 flex w-1/4 flex-col gap-4">
<div class="flex h-1/6 items-center justify-center rounded-lg bg-red-300">Content</div>
<div class="flex h-2/6 items-center justify-center rounded-lg bg-yellow-300">Content</div>
<div class="flex h-3/6 items-center justify-center rounded-lg bg-blue-300">Content</div>
</div>
<div class="flex h-5/6 w-1/4 items-center justify-center rounded-lg bg-green-300">Another content</div>
</div>
</div>
关于html - 我无法设置使用 Tailwind CSS 创建的仪表板的网格结构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/75624947/