Search code examples
htmlcssrowgrid-layout

Adding Rows & Removing Gaps From Responsive Grid Layout

I am trying to create a responsive grid layout. However I have so far got to a 4x5 grid which keeps going wrong when I try to add more rows. I have managed to get the squares spinning and I have a 4x2 grid which I want to make a 4x5 grid. However I can not seem to achieve the layout of it with the divs and I can not seem to remove the gap (there is no margin) between the divs. I want them touching on all sides.

Can somebody please show me how to fix this and make this a 4x5 grid as I am so confused. My code is below.

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>
Solution

  • Taking out justify-content: space-around in #container removes the space, depending on what you're going for.

    #container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    width: 100%;
}

    This might help you out more: http://css-tricks.com/snippets/css/a-guide-to-flexbox/