旁边有 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>