CSS: controllare una griglia FlexBox sui dispositivi mobile

Con i CSS possiamo controllare una griglia di tipo FlexBox sui dispositivi mobile.

Possiamo regolare la larghezza delle colonne usando le Media Query.

#wrap {
    display: flex;
    flex-wrap: wrap;
}

.item {
    width: 25%;
}

@media screen and (max-width: 640px) {
    .item {
        width: 50%;
    }
}

@media screen and (max-width: 1024px) {
    .item {
        width: 33.3333%;
    }
}

In questo modo a diverse risoluzioni avremo rispettivamente 4, 2 e 3 elementi per riga.