CSS grid layout whereby orphan/widow elements are not shown if the row isn't full. The goal was to have an even line at the bottom of a grid element, where there's a "Load more" button. The exception is that if there aren't any more items to load (eg. from an API), we then want to show the orphan/widow items.

gistfile1.txt

/**
 * Grid layout
 * 
 */
div.grid {
    display: grid;
}
div.grid li {
    margin: 12px auto 12px auto;
}

/**
 * Set columns & hide orphans/widows
 * 
 * @note    The .loaded class is added when all grid items have been
 *          added/loaded. Therefore, when the .loaded class is present on the
 *          grid, the orphan/widow hiding should not be done.
 */
@media (min-width: 920px) {
    div.grid {
        grid-template-columns: repeat(10, 1fr);
    }
    div.grid:not(.loaded) li:nth-child(10n + 1):nth-last-child(-n + 9),
    div.grid:not(.loaded) li:nth-child(10n + 1):nth-last-child(-n + 9) ~ li {
        display: none;
    }
}
@media (min-width: 840px) and (max-width: 919px) {
    div.grid {
        grid-template-columns: repeat(9, 1fr);
    }
    div.grid:not(.loaded) li:nth-child(9n + 1):nth-last-child(-n + 8),
    div.grid:not(.loaded) li:nth-child(9n + 1):nth-last-child(-n + 8) ~ li {
        display: none;
    }
}
@media (min-width: 760px) and (max-width: 839px) {
    div.grid {
        grid-template-columns: repeat(8, 1fr);
    }
    div.grid:not(.loaded) li:nth-child(8n + 1):nth-last-child(-n + 7),
    div.grid:not(.loaded) li:nth-child(8n + 1):nth-last-child(-n + 7) ~ li {
        display: none;
    }
}
@media (min-width: 680px) and (max-width: 759px) {
    div.grid {
        grid-template-columns: repeat(7, 1fr);
    }
    div.grid:not(.loaded) li:nth-child(7n + 1):nth-last-child(-n + 6),
    div.grid:not(.loaded) li:nth-child(7n + 1):nth-last-child(-n + 6) ~ li {
        display: none;
    }
}
@media (min-width: 600px) and (max-width: 679px) {
    div.grid {
        grid-template-columns: repeat(6, 1fr);
    }
    div.grid:not(.loaded) li:nth-child(6n + 1):nth-last-child(-n + 5),
    div.grid:not(.loaded) li:nth-child(6n + 1):nth-last-child(-n + 5) ~ li {
        display: none;
    }
}
@media (min-width: 520px) and (max-width: 599px) {
    div.grid {
        grid-template-columns: repeat(5, 1fr);
    }
    div.grid:not(.loaded) li:nth-child(5n + 1):nth-last-child(-n + 4),
    div.grid:not(.loaded) li:nth-child(5n + 1):nth-last-child(-n + 4) ~ li {
        display: none;
    }
}
@media (min-width: 480px) and (max-width: 519px) {
    div.grid {
        grid-template-columns: repeat(4, 1fr);
    }
    div.grid:not(.loaded) li:nth-child(4n + 1):nth-last-child(-n + 3),
    div.grid:not(.loaded) li:nth-child(4n + 1):nth-last-child(-n + 3) ~ li {
        display: none;
    }
}
@media (max-width: 479px) {
    div.grid {
        grid-template-columns: repeat(3, 1fr);
    }
    div.grid:not(.loaded) li:nth-child(3n + 1):nth-last-child(-n + 2),
    div.grid:not(.loaded) li:nth-child(3n + 1):nth-last-child(-n + 2) ~ li {
        display: none;
    }
}