Search code examples
htmlcssresponsive-designrowgrid-layout

How to add rows to a responsive grid

I am trying to create a responsive grid layout, however I have so far got to a 4x2 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.

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

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

  • Update Since the OP wants to use the flex property for creating his colummns, here's the updated code (the html structure is same as my previous answer, just the css changes. the flex property should be on row div, not container div) here's a fiddle with three rows : 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>

    and css (display: flex moves from .container to .row) 

    .row{
display: flex;
}

    if you want to know more about the flexbox property, check out the awesome css-tricks article about it : http://css-tricks.com/snippets/css/a-guide-to-flexbox/

    /************************************************************************/

    you have to add your columns to a containing row, then you'll be able to add as many row as you need without any complication. the html will look like this: 

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

    check bootstrap grid template here to see how the grid is in action: http://getbootstrap.com/examples/grid/