Grid with Subgrid and responsive first column on mobile
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; } } } } } }
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.
Comments