.grid-container {
    width: 100%;
    height: 10px;
    position: relative;
    overflow: hidden;
    transition: height 200ms ease-in-out;
  }
  
  .grid-item {
    width: 33.33%;
    padding: 5px;
    box-sizing: border-box;
    will-change: transform;
    transition: transform 800ms cubic-bezier(0.215, 0.61, 0.355, 1);
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
    z-index: 2;
  }
  
  .grid-item,
  .grid-group {
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .grid-item.invisible {
    opacity: 0;
  }
  
  @keyframes fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  .grid-group {
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px;
    opacity: 0;
    z-index: 1;
  }
  
  .fade-in {
    animation: fade 400ms;
    opacity: 1;
  }