如何设置 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 的 IE 10+ Codepen 2。

code

如何设置 3x3 CSS 网格

How to set up 3x3 CSS grid

html

css

grid-layout