如何在此网格中的所有框之间添加相等的空间？

Question

我想创建一个登录页面，现在我在每个框中都有占位符图像，但我试图在这些框之间添加一些空格。我如何在创建的所有框之间创建空间，并且还可以让它响应？我的想法是创建一个容器和边缘和填充混乱，但它弥补了移动视图。

.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>

感谢所有的提前帮助。

Answer 1

我不完全确定你想要做什么，但是有没有一个特定的原因，你不使用CSS网格？这似乎是完美的。

除此之外，你基本上必须使用填充和边距。为了不搞乱移动视图，请使用媒体查询。就像这样：

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

编辑：要求使用CSS网格的例子：（注意：CSS-电网不应取代Flexbox的，而是沿着它的工作，您认为合适的结合使用在给定的信息，我不能这样做） CodePen和相同的代码在这里：

.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>

这应该解决布局问题与差距，但它们的响应，你会PROB巧妙地仍然需要媒体查询。

Answer 2

我会使用Flexbox。如果你想要两端的空间，请将flex设置为1并将内容对齐到空格或空格。