htmlcssgallery

last row on image grid

I'm using the following code to create an album (within WordPress but for this example this is irrelevant):

This is how it comes out:

enter image description here

What I was hoping to do is have the images on the last row always span that row. So when there's only one image, make it 100% wide and larger in height, and for 2 images 50% wide and larger in height.

The number of images is different for every page. Any tips on how to do this?

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

Solution

  • From your code and has explain by Temani Afif, you have to start from a six columns grid layout, so elements can span either a third, an half or an entire row.

    Below snippet uses the same method proposed earlier using your code. CSS works with an unknown amount of children for container .gallery with X div.img .

    I switched some CSS rules too : grid instead absolute, and aspect-ratio instead padding-bottom.You can keep your owns for the sizing and placement, this is only for infos.

    Below an example snippet going from 6 to 1 element. Last elements position in the grid are filtered via https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#tree-structural_pseudo-classes and 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>

    Edit with a media querie

    .gallery {
  display: grid;
  grid-template-columns: repeat(4, 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%;
}
.gallery > .img:last-child:nth-child(2n + 1) {
  grid-column:span 4;
}

@media (min-width:585px) {
  .gallery {
  grid-template-columns: repeat(6, 1fr); /* mind this one */
}
/********************************************/
/* selectors to filter position in the flow */
/********************************************/
  
/* reset for 3 columns instead 2 */
.gallery > .img:last-child:nth-child(2n + 1) {
  grid-column:span 2;
}
  /*other rules for 3 columns layout */
.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 */

    .gallery {
  display: grid;
  grid-template-columns: repeat(4, 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%;
}
.gallery > .img:last-child:nth-child(2n + 1) {
  grid-column:span 4;
}

@media (min-width:585px) {
  .gallery {
  grid-template-columns: repeat(6, 1fr); /* mind this one */
}
/********************************************/
/* selectors to filter position in the flow */
/********************************************/
  
/* reset for 3 columns instead 2 */
.gallery > .img:last-child:nth-child(2n + 1) {
  grid-column:span 2;
}
  /*other rules for 3 columns layout */
.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>

    the grid-template-columns switches from 4 to 6 (picked because less rule grid-col rules t rewrite) , it could be from 2 to 6.