Automatisk kalkylering av bredd på flexade kolumner baserat på antal och gap

.wrapper {
    --gap: 1rem;
    --columns: 1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);

    @media (min-width: 64em) {
        --gap: 2rem;
        --columns: 2;
    }
    @media (min-width: 100em) {
        --gap: 3rem;
        --columns: 3;
    }
    @media (min-width: 100em) {
        --gap: 3rem;
        --columns: 4;
    }

    .item {
        width: 100%;

        @media (min-width: 48em) {
            width: calc((100% / var(--columns)) - var(--gap) + (var(--gap) / var(--columns)));
        }
    }
}

Författare: Erik

Erik har jobbat med webb professionellt sedan 2008. Från 2005 till 2008 studerades webb på ING/JTH och dessförinnan skapades webb på all fritid. Första sajten byggdes någon gång mellan 1996-1998.