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

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属性CRE在他的colummns，这是更新后的代码（html结构与我以前的答案相同，只是css更改。在flex属性应该是在row格，不container格） 这里的三行小提琴：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（从.containerdisplay: flex移动到.row）

.row{ 
display: flex; 
} 

如果你想知道更多关于flexbox属性，请查看真棒css-t关于它的ricks文章：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/