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

Question

我正在尝试创建一个登录页面，现在我在每个框中都有占位符图像，但我正在尝试在这些框之间添加一些空间。我如何在创建的所有框之间创建空间并允许它响应？我的想法是创建一个容器并弄乱边距和填充，但它弄乱了移动 View 。

.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-grid 有什么具体原因吗？这似乎是完美的选择。

除此之外，您基本上必须使用填充和边距。为了不让移动 View 困惑，请使用媒体查询。像这样:

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

编辑:根据请求使用 css-grid 的示例:(注意:css-grid 不应该取代 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>

这应该可以解决带有间隙的布局问题，但是为了响应，您可能仍然需要媒体查询。