Grid with Subgrid and responsive first column on mobile

PHOTO EMBED

Mon Dec 09 2024 21:15:43 GMT+0000 (Coordinated Universal Time)

Saved by @davidmchale

@supports (grid-template-columns: subgrid) {

  &__courses {
    display: grid;
    grid-template-columns: clamp(120px, 39vw, 180px) repeat(4, minmax(205px, 1fr));
    grid-template-rows: repeat(7, 1fr); 
    z-index: 1;
    column-gap: 1.6rem;


   @media(min-width:992px){
    display: grid;
    grid-template-columns: repeat(5,1fr); 
    grid-template-rows: repeat(7, 1fr); 
    z-index: 1;
   }

  
        .labels {
          display: grid;
          grid-template-rows: subgrid;
          grid-column: 1;
          grid-row: 1 / 8;
          align-items: left;
          text-align: right;
          font-weight: 600;
          position: sticky;
          top: 0;
          left: 0;
          background-color: $light-grey;
          z-index: 2;
          place-content: baseline;
          align-items: center;
          justify-content: end;
          justify-items: flex-end;


          > div{
            text-align: right;
            font-size:0.8rem;
            padding-right: 1rem;
            @media(min-width:992px){
              width: auto;
              text-align: right;
              font-size:1rem;
              padding-right: 0;
            }
          }

          @media (min-width: 992px) {
            position: relative;
            background-color: transparent;
           
          }

            .demand {
              grid-row: 3;
              width: max-content;
            
            }
      
            .funding {
              grid-row: 4;
            }
      
            .delivery {
              grid-row: 5;
            }
      
            .training {
              grid-row: 6;
            }
        }
    
    
      .course-items {
        display: grid;
        grid-column: 2 / -1;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
        grid-row: 1 / 8;
        grid-auto-rows: 1fr;
    
        .course {
          display: grid;
          grid-template-columns: subgrid;
          grid-template-rows: subgrid;
          grid-template-rows: repeat(7, 1fr); 
          grid-row: 1 / -1;
          place-content: center;
          align-items: center;
          justify-content: center;
          text-align: center;

            i{
              font-size: 1.6rem;
            }

              .title{
                display: flex;
                align-self: stretch;
                grid-row: 1;
                padding: 1rem 0rem;
                border-bottom: 1px solid $orange;
              }

              .details{
                grid-row: 2;
                  button{
                    text-align: center;
                    position: relative;
                    cursor: pointer;
                    display: block;
                    background-color: transparent;
                    border: 0;
                    font-size: 0.8rem;
                    font-weight: 700;
                    margin: 0 auto;
                      &:hover{
                        text-decoration: underline;
                        text-underline-offset: 5px;
                        text-decoration-color: $orange;
                      }
                  }
              }
              .demand {
                grid-row: 3;
              }
        
              .funding {
                grid-row: 4;
              }
        
              .delivery {
                grid-row: 5;
                  p{
                    margin: 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    i{
                      margin-right: 6px;
                      font-size: 1rem;
                    }
                    
                  }
              }
        
              .training {
                grid-row: 6;
                p{
                  margin: 0;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  i{
                    margin-right: 6px;
                    font-size: 1rem;
                  }
                  
                }
              }

              .courseinfo {
                grid-row: 7;
                a{
                  background-color: $light-grey;
                  padding: 10px 20px;
                  border-radius: 10px;
                  color: $navy;
                  text-decoration-color: $orange;
                  font-family: inherit;
                }
              }
        }
      }

    
  }
}
content_copyCOPY

Working with css grid/ subgrid and making the first column sticky while the remaining cols are scrollable on mobile. Full grid is displayed on desktop.