Sidebar with 3 grid layout next to it - css

Question

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">
Overview
Tickets
Ideas
Contacts
Settings
</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

Answer 1

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.

Answer 2

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">
Overview
Tickets
Ideas
Contacts
Settings
</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>