我無法設定使用 Tailwind CSS 建立的儀表板的網格結構

Question

我正在使用 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>
  )
}

Figma 檔案範例：

我的頁面如下所示：

Answer 1

如評論所述，您可以使用 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>