Grid 2x2 disappearing items whenever adding the absolute position on the element-CodePudding

I've came into a very weird problem in playing around grid display in css, the code below works (shows all the images) if only I have at least 1 image that is not set on absolute positioning, else, all of them disappear. Any ideas or workarounds on this?

<div className="grid grid-cols-2">
  <div className="shapeA overflow-hidden aspect-square relative">
    <img src="/mizuki.png" className="absolute z-20 opacity-[0.7]" />
    <div className="w-full h-full absolute bg-ni25-30 z-10 blur-sm opacity-[0.5] backdrop-blur-sm"></div>
  </div>
  <div className="shapeB overflow-hidden aspect-square relative">
    <img src="/ena.png" className="absolute z-20 opacity-[0.7]" />
    <div className="w-full h-full absolute bg-ni25-30 z-10 blur-sm opacity-[0.5] backdrop-blur-sm"></div>
  </div>
  <div className="shapeC overflow-hidden aspect-square relative">
    <img src="/mafuyu.png" className="absolute z-20 opacity-[0.7]" />
    <div className="w-full h-full absolute bg-ni25-30 z-10 blur-sm opacity-[0.5] backdrop-blur-sm"></div>
  </div>
  <div className="shapeD overflow-hidden aspect-square relative">
    <img src="/kanade.png" className="absolute z-20 opacity-[0.7]" />
    <div className="w-full h-full absolute bg-ni25-30 z-10 blur-sm opacity-[0.5] backdrop-blur-sm"></div>
  </div>
</div>

CodePudding user response：

You have to set a width to the element, otherwise it wont display all the items correctly. A working jsfiddle would work a lot better, or a link to the page in question