<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 5px;
  display: grid;
  grid-column-gap: 5px;
  grid-row-gap: 60px;
  grid-template-columns: repeat(auto-fill, minmax(calc((100vw - 140px) / 7), 1fr));
 }

div {
  height: 0;
  padding-top: 100%;
  background-color: #000;
  position: relative;
  
  &::after {
    content: 'background-color:#000';
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: calc(100% + 10px);
    font-size: 14px;
    color: #000;
  }
  
  &:nth-child(2) {
    filter: invert(60%);
    
    &::after {
      content: 'filter: invert(60%)'
    }
  }
  
  &:nth-child(3) {
    filter: invert(60%) sepia(93%);
    
    &::after {
      content:'filter: invert(60%) sepia(93%)';
    }
  }
  
  &:nth-child(4) {
    filter: invert(60%) sepia(93%) saturate(6477%);
    
    &::after {
      content: 'filter: invert(60%) sepia(93%) saturate(6477%)';
    }
  }
  
  &:nth-child(5) {
    filter: invert(60%) sepia(93%) saturate(6477%) hue-rotate(327deg);
    
    &::after {
      content: 'filter: invert(60%) sepia(93%) saturate(6477%) hue-rotate(327deg) ';
    }
  }
  
  &:nth-child(6) {
    filter: invert(60%) sepia(93%) saturate(6477%) hue-rotate(327deg) brightness(103%);
    
    &::after {
      content: 'filter: invert(60%) sepia(93%) saturate(6477%) hue-rotate(327deg) brightness(103%) ';
    }
  }
  
  &:nth-child(7) {
    filter: invert(60%) sepia(93%) saturate(6477%) hue-rotate(327deg) brightness(103%) contrast(101%);
    
    &::after {
      content: 'filter: invert(60%) sepia(93%) saturate(6477%) hue-rotate(327deg) brightness(103%) contrast(101%);'
    }
  }
  
  &:nth-child(8) {
    background-color: #f36;
    
    &::after {
      content: 'background-color: #f36;'
    }
  }
}