Início / user-17740557

Mohamed Mourad's questions

Martin Hope
Mohamed Mourad
Asked: 2025-01-09 15:52:00 +0800 CST
  • 5

Estou tentando exibir 4 imagens em uma grade aparentemente irregular. Adicionei duas caixas transparentes com altura um pouco menor que a das imagens, uma no início da primeira coluna e uma no final da segunda coluna.

Anexarei imagens do que estou tentando alcançar em comparação com o que já fiz, junto com o código. referência

meu código

.image-grid {
    grid-area: I;
    display: grid;
    grid-template-columns: repeat(2, 0.5fr);
    grid-template-rows: auto auto auto;
    gap: 1rem;
    justify-self: start;
}
  
.image-grid img {
    width: 176px;
    height: 176px;
    border-radius: 8px;
}

.transparent-box {
    width: 176px;
    height: 140px;
    background-color: rgba(0, 0, 0, 0.00);
    border-radius: 8px;
}
<div class="image-grid">
  <div class="transparent-box"></div>
  <img src="images/1.jpg" alt="Digital Network">
  <img src="images/2.jpg" alt="Workstation">
  <img src="images/3.jpg" alt="Person in Digital Environment">
  <img src="images/4.jpg" alt="Circuit Pattern">
  <div class="transparent-box"></div>
</div>

html