Comment ajouter un espace égal entre toutes les cases de cette grille?

Question

J'essaye de créer une page de destination et maintenant j'ai des images de placeholder dans chaque boîte, mais j'essaye d'ajouter un peu d'espace entre ces boîtes. Comment puis-je créer des espaces entre toutes les boîtes créées et lui permettre d'être réactif? Mon idée est de créer un conteneur et de jouer avec les marges et le rembourrage, mais cela crée des problèmes pour la vue mobile.

.twocolumn { 
 
    width: 100%; 
 
    background-size: cover; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.twocolumn2 { 
 
    width: 50%; 
 
    background-size: cover; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.onecolumn { 
 
    width: 25%; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.twocolumn h2 { 
 
    position: absolute; 
 
    bottom: 0; 
 
    padding: 20px 10px 10px 10px; 
 
    margin: 0; 
 
    font-family: passion one; 
 
    color: #FFF; 
 
} 
 

 
.twocolumn2 h2{ 
 
    position: absolute; 
 
    bottom: 0; 
 
    padding: 20px 10px 10px 10px; 
 
    margin: 0; 
 
    font-family: passion One; 
 
    color: #FFF; 
 
} 
 

 
.onecolumn h2 { 
 
    position: absolute; 
 
    bottom: 0; 
 
    padding: 20px 10px 10px 10px; 
 
    margin: 0; 
 
    font-family: passion one; 
 
    color: #FFF; 
 
    font-size: 14px; 
 
} 
 

 

 
.left { 
 
    float: left; 
 
} 
 

 
.right { 
 
    float: right; 
 
} 
 

 
.columnimg { 
 
    width: 100%; 
 
} 
 

 
.header { 
 
    background: white; 
 
    margin: 50px; 
 
    text-align: center; 
 
    font-family: passion one; 
 
    font-size:5vw; 
 
    letter-spacing: 3vw; 
 
    
 
}

<div class="clearfix"> 
 
     
 
     <a href="#"><div class="twocolumn clearfix" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:400px;background-position:center;"> 
 
      <h2>TITLE HERE</h2> 
 
     </div></a> 
 
     
 
     <a href="#"><div class="twocolumn2 clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:400px;background-position:center;"> 
 
      <h2>TITLE HERE</h2> 
 
     </div></a> 
 
     
 
     <a href="#"><div class="onecolumn clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:200px;background-position:center;"> 
 
      <h2>TITLE HERE</h2> 
 
     </div></a> 
 
     
 
     <a href="#"><div class="onecolumn clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:200px;background-position:center top;"> 
 
      <h2>TITLE HERE</h2> 
 
     </div></a> 
 
     
 
     <a href="#"><div class="onecolumn clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:200px;background-position:center;"> 
 
      <h2>TITLE HERE</h2> 
 
     </div></a> 
 
     
 
     <a href="#"><div class="onecolumn clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:200px;background-position:center;"> 
 
      <h2>TITLE HERE</h2> 
 
     </div></a> 
 

 
     
 
     <a href="#"><div class="twocolumn clearfix" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:400px;background-position:center;"> 
 
      <h2>TITLE HERE</h2> 
 
     </div></a> 
 
     
 
     <a href="#"><div class="onecolumn clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:200px;background-position:center;"> 
 
      <h2>TITLE HERE</h2> 
 
     </div></a> 
 
     
 
     <a href="#"><div class="onecolumn clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:200px;background-position:center;"> 
 
      <h2>TITLE HERE</h2> 
 
     </div></a> 
 
     
 
     <a href="#"><div class="onecolumn clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:200px;background-position:center top;"> 
 
      <h2>TITLE HERE</h2> 
 
     </div></a> 
 
     
 
     <a href="#"><div class="onecolumn clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:200px;background-position:center;"> 
 
      <h2>TITLE HERE</h2> 
 
      </div></a></div>

Merci pour toute l'aide à l'avance.

Answer 1

Je ne suis pas entièrement sûr de ce que vous voulez faire, mais y a-t-il une raison particulière pour laquelle vous n'utilisez pas css-grid? Cela semble parfait pour ça.

À part cela, vous devez utiliser un remplissage et une marge. Pour ne pas le gâcher pour la vue mobile, utilisez les requêtes média. Comme ceci:

@media print, screen and (min-width: 640px) { 
    //this css only applies when there is at least 640px of horizontal space (common tablet width) 
} 

Edit: Comme demande un exemple avec css-grid: (Note:.. Css-grid ne devrait pas remplacer FlexBox, mais plutôt travailler le long de lui utiliser une combinaison comme bon vous semble les informations données , je ne peux pas le faire) CodePen et le même code ici:

.wrapper { 
 
    display: grid; 
 
    grid-template-rows: 200px 200px auto 200px; 
 
    grid-template-columns: 2fr 1fr 1fr; 
 
    grid-template-areas: 
 
    "logo top-left top-right" 
 
    "logo bottom-left bottom-right" 
 
    "main main main" 
 
    "bottom-row bottom-row bottom-row"; 
 
    grid-column-gap: 6px; 
 
    grid-row-gap: 6px; 
 
} 
 

 
.logo { 
 
    grid-area: logo; 
 
    background-color: red; 
 
} 
 
.menu-top-left { 
 
    grid-area: top-left; 
 
    background-color: blue; 
 
} 
 
.menu-top-right { 
 
    grid-area: top-right; 
 
    background-color: blue; 
 
} 
 
.menu-bottom-left { 
 
    grid-area: bottom-left; 
 
    background-color: blue; 
 
} 
 
.menu-bottom-right { 
 
    grid-area: bottom-right; 
 
    background-color: blue; 
 
} 
 
.main { 
 
    grid-area: main; 
 
    background-color: green; 
 
    
 
    height: 400px; 
 
} 
 
.bottom-row { 
 
    grid-area: bottom-row; 
 
    background-color: yellow; 
 
}

<div class="wrapper"> 
 
    <div class="logo"></div> 
 
    <div class="menu-top-left"></div> 
 
    <div class="menu-top-right"></div> 
 
    <div class="menu-bottom-left"></div> 
 
    <div class="menu-bottom-right"></div> 
 
    <div class="main"></div> 
 
    <div class="bottom-row"></div> 
 
</div>

Cela devrait résoudre ce problème avec la mise en page, les lacunes, mais pour la réactivité, vous prob toujours besoin des requêtes médias.

Answer 2

J'utiliserais Flexbox. Réglez le flex à 1 et justifiez-content à espace-entre ou espace-autour si vous voulez de l'espace sur les extrémités.