I am working with a grid that matches the size of an image, which can be adjusted to be both smaller and larger in size.
https://i.sstatic.net/n8Fxg.png
Within this grid, I have 6 items.
https://i.sstatic.net/LGmUb.png
Each item is wider than the columns in the grid.
In order to achieve the desired width for the grid as shown in the image, how should I calculate it?
https://i.sstatic.net/G2M4I.png
tailwind.config = {
theme: {
extend: {
zIndex: {
1: 1,
2: 2,
3: 3,
4: 4,
5: 5,
6: 6,
7: 7,
8: 8,
9: 9,
}
}
}
}<script src="https://cdn.tailwindcss.com"></script>
<div class="w-64 bg-red-200 p-4">
<div class="grid grid-cols-6 relative">
<div class="absolute w-20 aspect-[2/3] rounded-sm inline-block overflow-hidden relative z-10">
<img src="https://www.themoviedb.org/t/p/original/wZp8xcADdOZ0FK6FEEtrKXjjdKJ.jpg" alt="" class="w-full h-full">
</div>
<div class="absolute w-20 aspect-[2/3] rounded-sm inline-block overflow-hidden relative z-9">
<img src="https://www.themoviedb.org/t/p/original/wZp8xcADdOZ0FK6FEEtrKXjjdKJ.jpg" alt="" class="w-full h-full">
</div>
<div class="absolute w-20 aspect-[2/3] rounded-sm inline-block overflow-hidden relative z-8">
<img src="https://www.themoviedb.org/t/p/original/wZp8xcADdOZ0FK6FEEtrKXjjdKJ.jpg" alt="" class="w-full h-full">
</div>
<div class="absolute w-20 aspect-[2/3] rounded-sm inline-block overflow-hidden relative z-7">
<img src="https://www.themoviedb.org/t/p/original/wZp8xcADdOZ0FK6FEEtrKXjjdKJ.jpg" alt="" class="w-full h-full">
</div>
<div class="absolute w-20 aspect-[2/3] rounded-sm inline-block overflow-hidden relative z-6">
<img src="https://www.themoviedb.org/t/p/original/wZp8xcADdOZ0FK6FEEtrKXjjdKJ.jpg" alt="" class="w-full h-full">
</div>
<div class="absolute w-20 aspect-[2/3] rounded-sm inline-block overflow-hidden relative z-5">
<img src="https://www.themoviedb.org/t/p/original/wZp8xcADdOZ0FK6FEEtrKXjjdKJ.jpg" alt="" class="w-full h-full">
</div>
</div>
</div>