如何将行添加到响应式网格

Question

我正在尝试创建一个响应式网格布局，但是到目前为止，我得到了一个 4x2 网格，当我尝试添加更多行时，它总是出错。我设法让方块旋转，我有一个 4x2 网格，我想制作一个 4x5 网格。但是我似乎无法用 div 实现它的布局。

谁能告诉我如何解决这个问题，并把它变成一个 4x5 网格，因为我很困惑。我的代码如下。请证明你的答案:)

CSS

.trigger{
width:64%;
height:64%;
background-color:white; 
}
.hover-img, hover-img.hover_effect  {
background-color:white;
position: relative;
width: 200px;
height: 200px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
text-align: center;
font-size: 0;
-webkit-user-select: none;
-webkit-touch-callout: none; 
border-style: solid;
border-width: 1px;
border-color: #4595ff;
}
.trigger:hover > .hover-img {
-webkit-transform:rotateY(360deg);
-moz-transform:rotateY(360deg);
-ms-transform:rotateY(360deg);
-o-transform:rotateY(360deg);
transform:rotateY(360deg);
font-size:14px;
color:white;
}

.img1 {
background-size: 100% 100%;
background-repeat: no-repeat; 
}
.img1:hover{
background-size: 100% 100%;
background-repeat: no-repeat;
}

.img2 {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img2:hover{
background-size: 100% 100%;
background-repeat: no-repeat;
}

.img3 {
background-size: 100% 100%;
background-repeat: no-repeat;
} 
.img3:hover{
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img4 {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img4:hover{
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img5 {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img5:hover{
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img6 {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img6:hover{
background-size: 100% 100%;
background-repeat: no-repeat;
}

#container{
width: 100%;
display:flex;
justify-content: space-around;
flex-wrap:nowrap;
}

.column{
float: left;
width: auto;
font-size: 12px;
}

HTML

<div id="container">
<div class="column">
<div class="trigger">
  <div tabindex="0" class="maincontent hover-img img1">
  </div>
</div>
<div class="trigger">
  <div tabindex="0" class="maincontent hover-img img2">
  </div>
</div>
</div>
<div  class="column">
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img3"></div>
</div>
<div class="trigger">
  <div tabindex="0" class="maincontent hover-img img4">
  </div>
</div>
</div>
<div  class="column">
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img5">
</div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img6">
</div>
</div>
</div>
<div  class="column">
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img5">
</div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img6">
</div>
</div>
</div>
</div>

Answer 1

更新 由于OP想要使用flex属性来创建他的colummns，这里是更新的代码（html结构与我之前的答案相同，只是css更改。flex属性应该在row div上，而不是containerdiv) 这是一个三行的小提琴：https://jsfiddle.net/Snowbell92/4dnjwzj6/

HTML：

<div id="container">
<div class="row">
  <div class="trigger">
    <div tabindex="0" class="maincontent hover-img img1"> </div>
  </div>
  <div class="trigger">
    <div tabindex="0" class="maincontent hover-img img2"> </div>
  </div>
  <div class="trigger">
<div tabindex="0" class="maincontent hover-img img3"></div>
  </div>
  <div class="trigger">
<div tabindex="0" class="maincontent hover-img img4"> </div>
  </div>
</div> <!--keep repeating the rows-->
</div>

和 css（display: flex 从 .container 移动到 .row）

.row{
display: flex;
}

如果您想了解更多关于 flexbox 属性的信息，请查看关于它的精彩 css-tricks 文章：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

/**************************************************** ******************************/

您必须将您的columns 添加到包含row，然后您就可以根据需要添加任意数量的行，而不会产生任何复杂性。 html 将如下所示：

<div class="row"> <!--this is the row that contains your columns.-->
   <div class="column"><p> some stuff. you can even use trigger div here for your purpose. and keep duplicating it for as many columns as you need. </div>
   <div class="column"><p> some stuff. you can even use trigger div here for your purpose. and keep duplicating it for as many columns as you need. </div>  
</div> <!--row ends here. for another row, just use this whole thing again.-->

在此处查看引导网格模板以了解网格的运行情况：http://getbootstrap.com/examples/grid/