.grid {
  display: grid;
  display: grid-lanes;
  max-width: 1200px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.grid-item {
  height: 120px;
  
  anchor-scope: --grid-cell;
	anchor-name: --grid-cell;

  .content {
    transition: inset 0.2s ease;
    
    position: absolute;
  	position-anchor: --grid-cell;
  	inset: anchor(inside);

    background: #D26;
    border: 2px solid #333;
    border-color: hsla(0, 0%, 0%, 0.5);
    border-radius: 5px;
    }
}

.grid-item--width2 { grid-column: span 2; }
.grid-item--width3 { grid-column: span 3; }
.grid-item--width4 { grid-column: span 4;}

.grid-item--height2 { height: 200px; }
.grid-item--height3 { height: 260px; }
.grid-item--height4 { height: 360px; }