last row of column grid css

by John Allan

HTML

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<hr>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<hr>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

CSS

ul {
  width: 360px;
  display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
hr {
  clear: left;
}
li {
  flex-grow: 0;
	flex-shrink: 1;
  flex-basis: calc(25% - 6.666666667px);
    
  width: 100px;
  margin: 10px 0;
  display: block;
  background: red;
  height: 20px;
  float: left;
}


		li:nth-child(4n+1):nth-last-child(-n+3) ~ li:not(:last-child){
			margin-left: 10px;
      margin-right: 0;
      background: green;
		}
    
    li:nth-child(4n+1):nth-last-child(-n+3) ~ li:last-child{
			margin-left: 10px;
      margin-right: auto;
      background: blue;
		}