SvenVdv
2/7/2018 - 10:06 AM

CSS Grid variable columns

Container has 3 or less equal-width columns if it contains <4 items and 4 columns if it contains 4 or more columns

** 267.5px = 25% of container width (1118px) WITHOUT grid-gaps (3x) **

Grid
content_copyfile_download
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(#{($max-site-width - 2*$gutter - 3*$grid-gap)*0.25}, 1fr));    //= 25% of container width WITHOUT outer padding and grid-gaps (3x)
  grid-auto-columns: min-content;
  grid-gap: 16px;
}