Saya tidak boleh menyediakan struktur grid papan pemuka yang dibuat dengan Tailwind CSS

Question

Saya sedang menulis bahagian hadapan papan pemuka menggunakan CSS Tailwind. Saya mencipta struktur grid halaman dan meletakkan komponen saya di dalamnya. Walau bagaimanapun, semua lajur adalah sama lebar dan panjang. Sesetengah komponen biasanya perlu kelihatan lebih luas, jadi beberapa komponen yang saya tambahkan tidak sepadan dengan fail Figma. Bagaimanakah saya boleh menyelesaikan masalah ini?

Kod halaman saya:

// 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>
  )
}

Contoh fail Figma:

Halaman saya kelihatan seperti ini:

Answer 1

Seperti yang dinyatakan dalam ulasan, anda boleh mencapai ini dengan lebih baik menggunakan flex 而不是 grid

Keluaran:

Kod:

<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>