如何設置3x3 CSS網格

Question

我正在嘗試創建一個響應式網格布局。 但是，到目前為止，我到了3x3網格，但出現了問題。 我設法使方塊旋轉。 但是我似乎無法用div實現它的布局。

有人可以告訴我如何解決此問題，並讓它成為3x3的網格，因為我很困惑。 我的代碼如下。

CSS

.trigger {
   width:100%;
   height:400px;
   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%;
   overflow: hidden; 
}

#column1 {
   float: left;
   width: 30%;
   margin-top: 0px;
   margin-bottom: 100px;
   overflow: hidden;
   margin-left: 2%;
   font-size: 12px
}

#column3 {
   float: left;
   width: 30%;
   margin-top: 0px;
   margin-left: 2%;
   margin-bottom: 100px;
   overflow: hidden;
}

HTML

<div id="container">
<div id="column1">
<div class="trigger">
<div tabindex="0" class="maincontentdiv4 hover-img img1" style="height: 390px;">
 </div>
</div>
<p></p>
<div class="trigger">
<div tabindex="0" class="maincontentdiv4 hover-img img2" style="height: 390px;">
</div>
</div>
<p></p>
</div>
<div id="column1">
<div class="trigger">
<div tabindex="0" class="maincontentdiv4 hover-img img3" style="height: 390px;"></div>
</div>
<p></p>
<div class="trigger">
<div tabindex="0" class="maincontentdiv4 hover-img img4" style="height: 390px;">
</div>
<div id="column3">
<div class="trigger">
<div tabindex="0" class="maincontentdiv4 hover-img img5" style="height: 390px;">
</div>
</div>
<p></p>
<div class="trigger">
<div tabindex="0" class="maincontentdiv4 hover-img img6" style="height: 390px;">
</div>
</div>
<p></p>
</div>
</div>

Answer 1

這里是針對所有IE支持的Codpen 1 。

code

對於使用flexbox Codepen 2的 IE 10+。

code