Automated reponsive grid from Heydon Pickering and further grid notes

gistfile1.txt

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  grid-gap: 1rem;
}

And an improvement to avoid overflow in narrow narrow columns:

grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));

/* and here is a solution for leftover grid items from https://css-irl.info/controlling-leftover-grid-items/ */
.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 20px;
}
li {
grid-column: span 2;
}

/* Dealing with 2 orphan items */

li:last-child:nth-child(3n - 1) {
grid-column-end: -2;
}

li:nth-last-child(2):nth-child(3n + 1) {
grid-column-end: 4;
}

/* Dealing with single orphan */

li:last-child:nth-child(3n - 2) {
grid-column-end: 5;
}

And here is a CSS trick with @supports for incompatible browsers for Grid feature:
.main {
width: 100%;
overflow: hidden;
}
.main > div {
width: 30%;
float: left;
}

@supports (display: grid) {
.main {
display: grid;
}
}

Most of my reading started here:
https://webdesign.tutsplus.com/articles/flexbox-vs-css-grid-which-should-you-use--cms-30184