CSS Grid using flex or grid

Using CSS flex

First on the ul:

    display: flex;
    grid-gap: 0 35px;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: row;

And then on the li:

    list-style: none;
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    min-height: 90px;
    flex-basis: 220px;
    flex-flow: column;
    align-items: flex-start;
    vertical-align: top;

Using CSS Grid

On UL or List container:

display: grid;
display: -ms-grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-ms-grid-columns: repeat(auto-fit, minmax(280px, 1fr));
grid-gap: 35px 25px;

 

IE (11 and 14+) Override for graceful degradation:

@supports (-ms-ime-align: auto){

}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){

}

*On the same ul or list container for both IE fixes:

{
   display: flex;
   justify-content: space-between;
}

.recent .os-sv-list .item-list ul li
{

   width: 20%;
}


super simple
this part can apply to a ton of grid items .os-sv-list .item-list ul

{
  display: flex;
  justify-content: space-between;
}

 

See also: Layout