flex wrap colums with gap

style.scss

    .list {
        --list-gap: 24px;
        --columns: 3;
        display: flex;
        justify-content: center;
        gap: var(--list-gap);
        flex-direction: column;

        @media screen and (min-width: 769px) {
            flex-direction: row;
            flex-wrap: wrap;
        }

        & > * {
            max-width: 100%;

            @media screen and (min-width: 769px) {
                width: calc(100% / var(--columns) - (var(--list-gap) / 2) - (var(--list-gap) / 2 / var(--columns)));
            }
        }
    }