Início / coding / Perguntas / 79563597
Accepted
vespino
Asked: 2025-04-09 14:17:16 +0800 CST

última linha na grade de imagens

  • 772

Estou usando o seguinte código para criar um álbum (dentro do WordPress, mas para este exemplo isso é irrelevante):

É assim que acontece:

insira a descrição da imagem aqui

O que eu esperava fazer é que as imagens da última linha sempre se estendessem por essa linha. Assim, quando houver apenas uma imagem, deixe-a com 100% de largura e maior em altura, e para duas imagens, com 50% de largura e maior em altura.

O número de imagens é diferente para cada página. Alguma dica de como fazer isso?

.gallery {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 8px;
}

.gallery>.img {
  width: 100% !important;
  position: relative;
  padding-bottom: 75%;
}

.gallery img {
  object-fit: cover;
  object-position: 50%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
<div class="gallery">
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
</div>

html

3 respostas

  1. Best Answer

    A partir do seu código, explicado por Temani Afif, você deve começar com um layout de grade de seis colunas, para que os elementos possam abranger um terço, metade ou uma linha inteira.

    O snippet abaixo usa o mesmo método proposto anteriormente usando seu código . O CSS funciona com uma quantidade desconhecida de filhos para contêineres .gallerycom div.imgX.

    Também troquei algumas regras CSS: gridem vez de absolute, e aspect-ratioem vez de padding-bottom. Você pode manter as suas próprias para o dimensionamento e posicionamento, isto é apenas para informação.

    Abaixo, um exemplo de trecho de código que vai de 6 para 1 elemento. A posição dos últimos elementos na grade é filtrada via https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#tree-structural_pseudo-classes e https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors/Selectors_and_combinators#subsequent-sibling_combinator

    .gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* mind this one */
  gap: 8px;
}
.gallery > .img {
  display: grid;
  aspect-ratio: 3/2;
  grid-column: span 2;/* a third of 6 columns */
}
.gallery img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}


/********************************************/
/* selectors to filter position in the flow */
/********************************************/
.gallery > .img:last-child:nth-child(3n + 1) /* standing alone on a row */
{
  grid-column: span 6; /* 100 % of 6 columns */
}
.gallery > .img:nth-last-child(2):first-child,/* first of a serie of only 2 first row */
.gallery > .img:nth-last-child(2):first-child ~ .img,/* last one of a serie of only 2 first row */
.gallery > .img:nth-last-child(3):nth-child(3n - 3) ~ .img /* only 2 on the last -row */
{
  grid-column: span 3; /* 50% of 6 columns */
}
/********************************************/
/******** end filtering position ************/
/********************************************/


/* below CSS is only for the demo purpose, there's no need to mind it */
/* demo */
body {
  max-width: 400px;
  margin: auto;
  display: grid;
  gap: 1.6em;
  padding:1.2em;
}
.gallery {
  border: solid red 1px;
  counter-reset : gal;
}
.img {
  counter-increment:gal
}
.gallery::after {
  content:counter(gal) ' element(s)';
position:absolute;
  translate:-1ch -1.2em;
  color:green;
  font-weight:bolder;
}
/* EO demo */
    <div class="gallery">
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
</div>
<div class="gallery">
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
</div>
<div class="gallery">
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
</div>
<div class="gallery">
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
</div>
<div class="gallery">
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
</div>
<div class="gallery">
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
</div>

    • 2

  2. Você pode confiar em :nth-childdirecionar imagens específicas

    .container {
  display: grid;
  grid-template-columns: repeat(6,1fr); /* 6 columns and not 3 */
  gap: 5px;
  border: 2px solid red;
  margin: 10px;
}
.container img {
  width: 100%;
  grid-column: span 2; /* span 2 cells to get a 3-column layout */
}

/* if one image is alone in the last row */
.container img:nth-child(3n + 1):nth-last-child(1) {
  grid-column: span 6;
}
/* if two images are in the last row */
.container img:nth-child(3n + 2):nth-last-child(1),
.container img:nth-child(3n + 1):nth-last-child(2){
  grid-column: span 3;
}
    <div class="container">
 <img src="https://picsum.photos/id/1/400/200">
 <img src="https://picsum.photos/id/1/400/200">
 <img src="https://picsum.photos/id/1/400/200">
 <img src="https://picsum.photos/id/1/400/200">
</div>
<div class="container">
 <img src="https://picsum.photos/id/1/400/200">
 <img src="https://picsum.photos/id/1/400/200">
 <img src="https://picsum.photos/id/1/400/200">
 <img src="https://picsum.photos/id/1/400/200">
 <img src="https://picsum.photos/id/1/400/200">
</div>
<div class="container">
 <img src="https://picsum.photos/id/1/400/200">
 <img src="https://picsum.photos/id/1/400/200">
 <img src="https://picsum.photos/id/1/400/200">
 <img src="https://picsum.photos/id/1/400/200">
 <img src="https://picsum.photos/id/1/400/200">
 <img src="https://picsum.photos/id/1/400/200">
</div>

    • 0 
  3. <?php
$totalImages = 7; // change this as needed
$columns = 3; // number of columns in the grid
$fullRows = floor($totalImages / $columns);
$remaining = $totalImages % $columns;
?>
<html>
    <head>
        <style>
            .gallery {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 8px;
            }
            .gallery > .img {
                width: 100%;
                position: relative;
                padding-bottom: 75%;
            }
            .gallery img {
                object-fit: cover;
                object-position: 50%;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                height: 100%;
                width: 100%;
            }

            /* Special handling for last row */
            .last-row-1 {
                grid-column: span 3;
                padding-bottom: 50%; /* taller image */
            }
            .last-row-2 {
                grid-column: span 2;
                padding-bottom: 60%;
            }
            .last-row-2 + .last-row-2 {
                grid-column: span 1;
                padding-bottom: 60%;
            }
        </style>
    </head>
    <body>
        <div class="gallery">
            <?php for($i=0; $i<$totalImages; $i++): ?>
                <?php
                    $class = '';
                    if ($i >= $fullRows * $columns) {
                        // This image is in the last (incomplete) row
                        if ($remaining == 1) {
                            $class = 'last-row-1';
                        } elseif ($remaining == 2) {
                            $class = 'last-row-2';
                        }
                    }
                ?>
                <div class="img <?= $class ?>">
                    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
                </div>
            <?php endfor; ?>
        </div>
    </body>
</html>

    Como funciona

    A grade tem 3 colunas.

    A lógica do PHP calcula quantas imagens estão na última linha ($remaining).

    Com base nisso, atribuímos uma classe personalizada às imagens da última linha.

    Em CSS, usamos grid-column: span X para fazer com que as imagens da última linha ocupem a linha inteira (para 1 imagem) ou metade (para 2 imagens).

    Também ajustamos o preenchimento inferior para torná-los mais altos e proporcionar equilíbrio visual.

    • -1

relate perguntas