Créer un 4x4 de la grille souple de carrés, avec une marge de 20px de chaque côté du conteneur?

Je veux créer une grille de sensible 4x4 carrés, avec une marge de exactement 20px sur les côtés gauche et droit de l'ensemble du conteneur. En outre, cela aurait pour effet d'éliminer la marge de gauche sur les premières places dans chaque rangée et aussi d'éliminer les marge de droite sur les dernières places dans chaque rangée depuis deux marges ne sont pas nécessaires.

La couleur verte notes de la 20px marges de chaque côté.

Créer un 4x4 de la grille souple de carrés, avec une marge de 20px de chaque côté du conteneur?

Je n'ai jusqu'à présent créé la grille de carrés avec des pourcentages mais le problème est que, depuis que je suis en appliquant une marge de tous les côtés de chaque carré, cette méthode ne garantit pas une marge de gauche et droite (sur le contenant) de 20px chaque.

Violon: http://jsfiddle.net/p9qdhfub/1/

HTML

<section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>

CSS

div {
    background: #000;
    float: left;
    height: 24vw;
    margin: 1%;
    width: 23%;
}

Question

Comment serais-je capable de créer un 4x4 de la grille souple de carrés avec le conteneur (c'est à dire section) toujours avoir un margin-left de 20px et un margin-right de 20px?

Je n'ai jamais utilisé, mais je suis sûr que beaucoup de gens vont dire: utiliser flexbox.
Attendez une seconde, px ou %?
Pourquoi ne pas vous fixer 20px marge de la <section> élément?
Parce qu'alors, la première case de chaque ligne ont une marge de gauche et la dernière case de chaque ligne ont une marge de droite.
si vous avez besoin toujours d'un 20px marge extérieure, mais garder l'intérieur des marges en %. Si oui, voir mon exemple.

OriginalL'auteur J82 | 2014-12-30

  1. 2

    jsfiddle démo

    Section sera toujours avoir une marge de 20px;

    Tous les premiers(+4) DIV aura une marge de gauche de 0;

    Chaque quatrième DIV aura une marge droite de 0;

    div {
    background: #000;
    float: left;
    height: 24vw;
    margin: 1%;
    width: 23.5%;
}
div:nth-child(4n-3){
    background:red;
    margin-left:0; /* or use 20px */
}
div:nth-child(4n){
    background:blue;
    margin-right:0; /* or use 20px */
}
section{
    margin:0 20px; /* so you don't need this any more */
}
    Ce l'un des clous c'est à mon avis la seule chose que je voudrais ajouter qu'au lieu de mettre height:24vw vous pouvez obtenir un beau carré, l'apparence, par un après l'élément avec content:'';display:block;position:relative;padding-bottom:100%; comme ceci: jsfiddle.net/p9qdhfub/11

    OriginalL'auteur Roko C. Buljan