旁边有 3 个网格布局的侧边栏

Question

我有一个仪表板布局，左侧有一个边栏，我想要网格布局中边栏右侧的一些内容，其中包含 3 个项目

到目前为止我有仪表板

<div>
  <div>
    <div class=" flex flex-col inset-y-0 left-0 z-30 overflow-y-auto transition duration-300 transform bg-white w-60 dark:bg-gray-900 lg:translate-x-0 lg:static lg:inset-0">
      <div class="flex items-center justify-center mt-8">
        <div class="flex items-center">
          <span class="text-2xl font-semibold text-gray-800 dark:text-white">Dashboard</span>
        </div>
      </div>

      <nav class="flex flex-col px-4 mt-10 text-center">
        <a href="#" class="py-2 text-sm text-gray-700 bg-gray-200 rounded dark:text-gray-100 dark:bg-gray-800">Overview</a>
        <a href="#" class="py-2 mt-3 text-sm text-gray-600 rounded dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-800">Tickets</a>
        <a href="#" class="py-2 mt-3 text-sm text-gray-600 rounded dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-800">Ideas</a>
        <a href="#" class="py-2 mt-3 text-sm text-gray-600 rounded dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-800">Contacts</a>
        <a href="#" class="py-2 mt-3 text-sm text-gray-600 rounded dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-800">Settings</a>
      </nav>
    </div>

    <!-- the items i want to put in a 3 grid layout !-->

    <div class="flex flex-wrap -mx-3 overflow-hidden sm:-mx-1 md:-mx-1 lg:-mx-2 xl:-mx-2">
      <div class="my-3 px-3 w-1/3 overflow-hidden sm:my-1 sm:px-1 sm:w-full md:my-1 md:px-1 md:w-1/2 lg:my-2 lg:px-2 lg:w-1/3 xl:my-2 xl:px-2 xl:w-1/3">
        @livewire('dashboard')
      </div>
    </div>
  </div>
</div>

我尝试了很多东西，其中大部分都以仪表板覆盖图像而告终，现在我的图像始终与仪表板位于同一列中，而不是它们应该居中的中间位置。

看图更清楚

Answer 1

我为你创建了一个demo。

<div class="flex">
  <div class="flex w-60 bg-gray-200 h-96"></div>
  <div class="flex flex-1 bg-blue-50">
    <div class="grid grid-cols-3 gap-4">
      <div class="col-span-1 bg-blue-200 w-48"></div>
      <div class="col-span-1 bg-blue-200 w-48"></div>
      <div class="col-span-1 bg-blue-200 w-48"></div>
      <div class="col-span-1 bg-blue-200 w-48"></div>
    </div>
  </div>
</div>

此外，我建议浏览 Andre Madarang 中的 YouTube 视频。他在 Tailwind 上有一些很棒的内容。

Answer 2

和Digvjay类似，我把一个demo放在一起。

如果这样更容易理解，我使用了相当多的原始标记。

<div class="flex mt-8">

  <!-- sidebar -->
  <div class="flex flex-col w-60 dark:bg-gray-900">
    <div class="flex items-center justify-center ">
        <div class="flex items-center">
            <span class="text-2xl font-semibold text-gray-800 dark:text-white">Dashboard</span>
        </div>
    </div>

    <nav class="flex flex-col px-4 mt-10 text-center">
        <a href="#" class="py-2 text-sm text-gray-700 bg-gray-200 rounded dark:text-gray-100 dark:bg-gray-800">Overview</a>
        <a href="#" class="py-2 mt-3 text-sm text-gray-600 rounded dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-800">Tickets</a>
        <a href="#" class="py-2 mt-3 text-sm text-gray-600 rounded dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-800">Ideas</a>
        <a href="#" class="py-2 mt-3 text-sm text-gray-600 rounded dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-800">Contacts</a>
        <a href="#" class="py-2 mt-3 text-sm text-gray-600 rounded dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-800">Settings</a>
    </nav>
  </div>

  <!-- the items i want to put in a 3 grid layout !-->
  <div class="p-4 grid grid-cols-3 gap-4 bg-gray-50 w-full">
      <div class="bg-red-500 w-full"></div>
      <div class="bg-red-500 w-full"></div>
      <div class="bg-red-500 w-full"></div>
      <div class="bg-red-500 w-full"></div>
  </div>
</div>

旁边有 3 个网格布局的侧边栏

Sidebar with 3 grid layout next to it

css

tailwind-css