时间戳

首页 > 解决方案 > 旁边有 3 个网格布局的侧边栏

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

问题描述

我有一个仪表板布局，左侧有一个侧边栏，我希望侧边栏右侧的一些内容采用网格布局，包含 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>

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

查看图像以获得更清晰的图像

视觉描述

标签： csstailwind-css

解决方案

我为你创建了一个演示。

<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 上有一些很棒的内容。

推荐阅读