我有一个图像大小的网格。其尺寸可以减小和扩大

我有6个项目在网格中。

每个项目都大于网格的列。
我想设置如图所示的网格宽度。我应该怎么计算？

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>