Início / coding / Perguntas / 79341771
Accepted
Mohamed Mourad
Asked: 2025-01-09 15:52:00 +0800 CST

área de grade diferente ao usar grid-template-column

  • 772

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

3 respostas

  1. Você pode usar uma grade de 2 colunas como está fazendo, mas com estas alterações:

    remova os elementos transparentes redundantes e, em vez disso, posicione a primeira imagem na coluna 2;

    imagens pares irão automaticamente para a coluna 1; mova-as para cima pelo tamanho do espaço (1rem neste caso) usando uma transformação, pois isso não afeta o layout da grade, sendo apenas uma mudança visual.

    .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;
  border: solid 1px black;
}

.image-grid :first-child {
  grid-column: 2;
}

.image-grid :nth-child(even) {
  transform: translateY(-1rem);
}
    <div class="image-grid">
  <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>

    • 1
  2. Best Answer

    Use uma grade com uma única linha. Cada célula da grade contém então um flexbox vertical, com preenchimento superior definido de forma diferente para cada coluna para atingir aquela aparência aleatória.

    .image-grid > :first-child {
  margin-top: 10em;
}

.image-grid > :last-child {
  margin-top: 3em;
}


    body {
  margin: 1em;
  background: black;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  background: aliceblue;
}

.image-grid > * {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.image-grid > :first-child {
  margin-top: 10em;
  margin-bottom: 3em;
  justify-self: end;
}

.image-grid > :last-child {
  margin-top: 3em;
}

.image-grid img {
    width: 176px;
    height: 176px;
    border-radius: 8px;
}
    <div class="image-grid">
  <div class="column">
    <img src="https://picsum.photos/id/602/300">
    <img src="https://picsum.photos/id/603/300">
  </div>
  <div class="column">
    <img src="https://picsum.photos/id/604/300">
    <img src="https://picsum.photos/id/605/300">
  </div>
</div>

    • 1

  3. É isso que você está tentando alcançar?

    .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;

    & :first-child {
        grid-column-start: 2;
    }

    & :nth-child(even) {
        margin-top: -2rem; 
        background-color: bisque;
    }
}

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

    • 0

relate perguntas