CODEWITHSUNDEEP
csstailwind-css
niels van hoof
niels van hoof

Reputation: 489

Sidebar with 3 grid layout next to it

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

Upvotes: 2

Views: 1635

Answers (2)

Nathan Gross
Nathan Gross

Reputation: 118

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>

Upvotes: 0

Digvijay
Digvijay

Reputation: 8947

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.

Upvotes: 2

Related Questions