问向网格单元格中添加文本和图像将不会在另一个单元格下显示其中一个

EN

.categories p{
  position: absolute;
  bottom:0;
  right: 0;
}

.arrange-fixes{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  min-height:800px;
  width: 550px;
  justify-items: center;
  align-items: center;
}

.categories {
    display: grid;
    /* background-color: lime; */
    width: 225px;
    height: 162px;
    position: relative;

    border-radius: 15px;    
    border-width: 5px;
    border-style: double;
    border-color: #85c236;

    box-shadow: inset 0px 0px 18px 8px rgb(198, 230, 156);
    background-image: url("/images/fixes/windows.jpg");
    background-position: center;
    background-size: contain;


}

.categories p{
  position: absolute;
  bottom:-75px;
  right: 0;
}

<div class="arrange-fixes">
      <div class="categories">
        <div id="operating-systems"></div>
        <p>Operating system instalation and optimisation</p>
      </div>
      <div class="categories"></div>
      <div class="categories"></div>
      <div class="categories"></div>
      <div class="categories"></div>
      <div class="categories"></div>
 </div>

*,
*::before,
*::after {
  box-sizing: border-box;
}

html{
  font-size: 62.5%;
}


body {
  min-height: 100vh;
  background-color: #999;
  margin: 0;
}

.container{
max-width: 900px;
display: flex;
flex-direction: column;
margin: 0 auto;
justify-content: center;
align-items: center;
}

.box-1{
  background-color: greenyellow;
  width:100%;
  height:20rem;
}

.box-2{
  background-color: blueviolet;
  width: 100%;
  color:white;
  font-size: 2rem;
  text-align: end;
}

<div class="container">
      <div class="box-1"></div>
      <div class="box-2">
        <p>Lorem ipsum dolor sit amet.</p>
      </div>
</div>

.categories{
     display: grid;
     background-color: lime;
     width: 150px;
     height: 250px;

     border-radius: 15px;    
     border-width: 5px;
     border-style: double;
     border-color: #85c236;

     box-shadow: inset 0px 0px 18px 8px rgb(198, 230, 156);

     background-image: url("/images/fixes/windows.jpg");
     background-position: center;
     background-size: contain;
 }

   figure img{
            width: 100%;
      }
      figure{
            text-align: center;
      }

<div id="operating-systems"> 
            <figure>
                  <figcaption>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</figcaption>
                  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/2214px-How_to_use_icon.svg.png" alt="">
            </figure>
</div>

#operating-systems{
                  background: url(https://iconstore.co/assets/img/set/thumb/unoline-gallery.png);
                  background-position: bottom;
                  background-size: cover;
                  background-repeat: no-repeat;
                  background-clip: padding-box;
                  background-origin: content-box;
                  padding: 15px;
            }