Largeurs et marges

Bonjour,
je voudrais que mes div s'affichent 3 par 3 (3 par ligne)
entre ces div je voudrais une marge de 1em

mon css est le suivant :

/* Styles pour les boîtes flexibles*/
.colcont {
    display: flex;
    flex-wrap: wrap;

.col {
    width: 33.33%; margin:1em;
}


}

le hic c'est que comme j'ai une marge de 1em je n'ai que 2 div par ligne.
comment faire le rapport em et % pour avoir mes 3 div par ligne svp ?

Salut,

Il y a surement d'autres façon de jongler avec le flex mais la solution la plus directe (peut être pas la meilleure) que je vois est :

width: calc(33% - 2em);

Sinon pour un cas comme celui là j'aurais tendance a utiliser grid maintenant :

.colcont {
    display: grid;
    grid-gap: 1em;
    grid-template-columns: 1fr 1fr 1fr;
}

https://jsfiddle.net/undless/o0tvL7qe/5/
Modifié par _laurent (27 Feb 2019 - 10:39)