I think my favorite use of display:grid is being able to "visually" see how many columns I'm using on every media query as opposed to trying to do mental division on multiples of 12 (xl-col-2 lg-col-3 md-col-4 sm-col-6 col-12)

    .parent {
        grid-template-columns: 1fr;
        display: grid;

        @media (min-width: $breakpoint-sm-min) {
            grid-template-columns: 1fr 1fr;
        }
        @media (min-width: $breakpoint-md-min) {
            grid-template-columns: 1fr 1fr 1fr;
        }
        @media (min-width: $breakpoint-lg-min) {
            grid-template-columns: 1fr 1fr 1fr 1fr;
        }
        @media (min-width: $breakpoint-xl-min) {
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        }
    }