CodePen Embed - Selecting the final row of elements in a dynamic grid by James Steinbach

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>
<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

$columns: 6;

.grid {
  margin: 1rem;
  padding: .5rem;
  font-size: 0;
  border: 1px solid green;
}

.grid-item {
  $item: &;
  
  margin: .5rem;
  width: calc((100% / #{$columns}) - 1rem);
  display: inline-block;
  background: coral;
  
  &::before {
    display: block;
    content: '';
    padding-top: 10vw;
  }
  
  $first-child-in-any-row: ":nth-child(#{$columns}n + 1)";
  
  $any-child-in-the-last-row: ":nth-last-child(-n + #{$columns})";
  
  $first-child-in-last-row: "&#{$first-child-in-any-row}#{$any-child-in-the-last-row}";

  #{$first-child-in-last-row},
  #{$first-child-in-last-row} ~ & {
    box-shadow: 0 0 0 .33rem blue;
  }
}

View Compiled

This Pen is owned by DockYard on CodePen. It is a fork of this Pen.

See more by @DockYard on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.