Center responsive stack of divs CSS

Question

I am trying to center stack of divs 3 per row if browser window is biger than 1024 and if it is less than 1024 to show 2 divs in row but keep showing all 6 of them. Currently i am having a problem to migrate what i have already found out as it doesn't really fit to the div.

Here is my previous example of how it was supposed to look but i did not tried to pack it into divs.

h3 {
     word-break: break-word; /* non standard for webkit */ 
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
}
.img{
 width:640px;
 height:100%;
}
.image { 

   position: relative; 
   width: auto; /* for IE 6 */
   max-height: 640px;
}

h2{
   background-color: rgba(0, 0, 0, 0.5);
   padding-left: 20px;
   padding-right: 20px;
   padding-bottom: 10px;
    padding-top: 10px;
   position: absolute; 
   bottom:-15px;
   left: 0; 
   width: 600px; 
   color:white;
}

<div class="image">
      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />    
      <h2 lang="en">A Movie in the Park: Kung Fu Panda</h2>
</div>
<div class="image">
      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />     
      <h2 lang="en">A Movie in the Park: Kung Fu Panda saasffdafadfadfda</h2>
</div>
<div class="image">
      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />      
      <h2 lang="en">Incomprehensibilities ffafefeafea fefeefes gregrgregregerge</h2>
</div>

Here is what i tried to do with divs but it doesn't work the same way so i couldn't implement those properties.

body{
  background-color:darkgrey;
}
.row{
  left: 50%; 
}

@media (min-width: 1024px) { .col-3::after{width:37.5%} }
.col-3 {width: 25%; float: left; border: 1px solid white;
    margin-right: 20px;height:auto;  margin-bottom: 20px;
 
    }
img {
    max-width: 100%;
    max-height: 100%;
}
h2{
   background-color: rgba(0, 0, 0, 0.5);
     word-break: break-word; /* non standard for webkit */ 

  font-size: 2vw;

    max-width: 100%;
    max-height: 100%; 
   color:white;
}

<body>
<div class="row">
<div class="col-3">
       <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />  
      <h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
       <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />  
      <h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
       <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />  
      <h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
       <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />  
      <h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
       <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />  
      <h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
       <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />  
      <h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
</div>
</body>

basement · Accepted Answer · 2017-08-01T20:58:34.720

Using floats and media queries you can achieve this result. I used flexbox to center a wrapper that contains all 6 divs so everything remains centered despite div width or viewport dimensions. Next you can float all inner divs left and use nth-child to target only the ones you want to clear which will determine your column number. Use a media-query to target a viewport wider than 1025pxand simply change your nth-child pseudoclass accordingly.

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
}
html {
  font-family: sans-serif;
}
body {
  display: flex;
  align-items: center;
}
.wrapper {
  overflow: hidden;
  margin: auto;
  padding: 0.75rem;
  background-color: #eee;
}
div > div {
  padding: 0.75rem 1.5rem;
  margin: 0.5rem;
  background-color: #ccc;
  float:left;
}
div:nth-child( 4n ){
  clear: left;
}

.note {
  width: 100%;
  padding: 1rem;
  background-color: #000;
  color: #eee;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
}

@media( max-width: 1025px ){
  div:nth-child( 2n + 3 ){
    clear: left;
  }
  div:nth-child( 4n ){
    clear: none;
  }
  .note {
    background-color: rgba( 0, 0, 0, 0.6 );
  }
}

<div class="note">Resize viewport to change layout</div>

<div class="wrapper">
  <div>div1</div> <div>div2</div> <div>div3</div>
  <div>div4</div> <div>div5</div> <div>div6</div>
</div>

Really good answer. Thank you! Do you know how to insert text on top of image so it fits div and has overlay which do not expand out of div/image? — AESTHETICS, Aug 01 '17 at 20:58
You could use background images with regular static text or use actual `img` tags and absolutely position the images. Create specific question if you are still confused. — basement, Aug 01 '17 at 21:03
How to place text on top of image within div with layout transparent layout.https://stackoverflow.com/questions/45449528/how-to-place-text-on-top-of-image-within-div-with-layout-transparent-layout — AESTHETICS, Aug 02 '17 at 00:18
There is some problem with images when they are not size of the divider of 1024. I would think @media( max-width: 1025px ){ should be @media( min-width: 1024px ){ but when i make changes it doesn't work. — AESTHETICS, Aug 02 '17 at 00:25

Center responsive stack of divs CSS

1 Answers1