Box that expand in a gallery

I'm trying to figure out how to expand a box by the size some boxes inside a "gallery". I need it the way it doesn't messy the other boxes neither the other page elements. It should expand and collapse. There are eight boxes and when I click at one of them it should take the space of all the eight boxes, when I clik it again, it should collapse down to its original one-box-size. It should also show a different content for each box when expanded.

I tried to use css target properties and anchor tags. What solution would you guys use?

here's my code trial:

<a href="#odontopediatria">
    <div class="trat-card">
        <div class="trat-icone"><i class="fas fa-tooth"></i></div>
        <div class="trat-titulo">Odontopediatria</div>
    </div>
    <a href="#_" class="lightbox" id="odontopediatria">
        <div class="lightbox-conteudo">
            <div class="trat-texto">
                <i class="fas fa-tooth fa-3x"></i>
                <p>Odontopediatria é a especialidade que tem como objetivo o diagnóstico, a prevenção, o tratamento e o controle dos problemas de saúde bucal do bebê, da criança e do adolescente.
                </p>
            </div>
        </div>
    </a>
</a>


    
.lightbox {
  text-align: center;
  color: white;
  font-size: 22px;
  display: none;
}

.lightbox:target {
  display: block;
  top: 0;
}

.lightbox div:nth-child(n) {
  position: absolute;
    left: 0;
  display: flex;
    flex-direction: column;
    width: 100%;
    height: 306px;
    border-radius: 4px;
    align-items: center;
    justify-content: space-around;
  padding: 30px;
  margin: 0 auto;
}

from Box that expand in a gallery