Ich kann die Rasterstruktur eines mit Tailwind CSS erstellten Dashboards nicht einrichten

Question

Ich schreibe ein Dashboard-Frontend mit Tailwind CSS. Ich habe eine Rasterstruktur der Seite erstellt und meine Komponenten darin platziert. Allerdings sind alle Spalten in Breite und Länge gleich. Einige Komponenten müssen normalerweise breiter aussehen, daher stimmten einige der von mir hinzugefügten Komponenten nicht mit der Figma-Datei überein. Wie kann ich dieses Problem lösen?

Code meiner Seite:

// 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-Dateibeispiel:

Meine Seite sieht so aus:

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>