Sidebar with 3 grid layout next to it

user_11988656 0
Viewed 705

I have a dashboard layout with a sidebar on the left, I would like some content right of the sidebar in a grid layout with 3 items

So far I have the dashboard

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

I tried a lot of things, most of them ended up with the dashboard covering up the images, now my images are always in the same column as the dashboard instead of centering in the middle liek they should.

See the image for a clearer picture

Visual description

tailwind-css css
2 Answers

I created a demo for you.

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

Also, I recommend going through YouTube videos from Andre Madarang. He has some great content on Tailwind.

user_53261910

Similar to Digvjay, I put a demo together.

I used a fair bit of your original markup if that makes it easier to follow.

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