My attempt at creating a responsive grid layout has hit a snag. I currently have a 4x5 grid, but when trying to add more rows it goes awry. I've successfully implemented spinning squares in a 4x2 grid that I now want to expand to a 4x5 grid. However, achieving the desired layout with the divs and eliminating the gap between them has proven challenging. I aim for the squares to touch on all sides.
If anyone could assist in rectifying this issue and help transform my 4x2 grid into a 4x5 grid, I would sincerely appreciate it. Below is the code I'm working with.
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;
}
// Repeat pattern for img2, img3, img4, img5, img6
#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>
// Repeated content from here for img3, img4, img5, img6...
</div>