如何將行添加到響應式網格

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/