CODEWITHSUNDEEP
htmlcss
AlwaysStudent
AlwaysStudent

Reputation: 1374

Grid Box Shift between divs

I am trying to make a mini grid post layout using css. But i have a problem with divs. I have try it in this demo page. And I do not get the shape I want. I want to make it like the screenshot

enter image description here

I try it like this CSS codes:

.div {
  position:relative;
  float:left;
  width:100%;
  border-radius:5px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  background-color:#1d1f20;
}

.div:nth-child(1){
  width:180px;
  padding-top:180px;
  margin-right:5px;
  margin-bottom:5px;
}
.div:nth-child(2){
  width:180px;
  padding-top:180px;
  margin-right:5px;
  margin-bottom:5px;
}
.div:nth-child(3){
  width:400px;
  padding-top:400px;
  margin-right:5px;
  margin-bottom:5px;
}
.div:nth-child(4){
  width:180px;
  padding-top:180px;
  margin-right:5px;
  margin-bottom:5px;
}
.div:nth-child(5){
  width:365px;
  padding-top:180px;
  margin-right:5px;
  margin-bottom:5px;
}

.div:nth-child(6){
  width:180px;
  padding-top:180px;
  margin-right:5px;
  margin-bottom:5px;
}

HTML

<div class="container">
  <div class="div"></div>
  <div class="div"></div>
  <div class="div"></div>
  <div class="div"></div>
  <div class="div"></div>
  <div class="div"></div>
</div>

How can i get the screenshot within css ? Anyone can help me here ?

Upvotes: 1

Views: 43

Answers (2)

Saa_keetin
Saa_keetin

Reputation: 655

I am not sure if this is what you are looking for, i had to restructure your html to achive that here is the link:http://codepen.io/saa93/pen/ENjNgy

<style>
body,html {
  padding:0px;
  margin:0px;
  width:100%;
  height:100%;
}
.container {
  position:relative;
  width:100%;
  max-width:1010px;
  min-height:400px;
  margin:0px auto;
}

.div {
  position:relative;
  float:left;
  width:100%;
  border-radius:5px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  background-color:#1d1f20;
}

.div:nth-child(1) {
  background: transparent none repeat scroll 0 0;
  float: left;
  width: 370px;
}


.div:nth-child(3){
  width:180px;
  float:left;
}
.div:nth-child(1) > .div:nth-child(1){
  background-color:#1d1f20;
  width:180px;
  padding-top:180px;
  margin-right:5px;
  margin-bottom:5px;
}
.div:nth-child(1) > .div:nth-child(2){
  width:180px;
  padding-top:180px;
  margin-right:5px;
  margin-bottom:5px;
}
.div:nth-child(1) > .div:nth-child(3) {
  margin-bottom: 5px;
  margin-right: 5px;
  padding-top: 185px;
  width: 365px;
}

.div:nth-child(2) {
  margin-bottom: 5px;
  margin-right: 5px;
  padding-top: 370px;
  width: 400px;
}
.div:nth-child(3) > .div:nth-child(1){
  width:180px;
  padding-top:180px;
  margin-right:5px;
  margin-bottom:5px;
}

.div:nth-child(3) {
  float: left;
  width: 180px;
}
.div:nth-child(3) > .div:nth-child(2){
  width:180px;
  padding-top:180px;
  margin-right:5px;
  margin-bottom:5px;
}

</style>
<div class="container">
  <div class="div">
        <div class="div"></div>
        <div class="div"></div>
        <div class="div"></div>
   </div>
  <div class="div"></div>


  <div class="div">
    <div class="div"></div>
  <div class="div"></div>
  </div>
</div>

I hope this helps :)

Upvotes: 1

paolobasso
paolobasso

Reputation: 2018

You can use a lot of solutions:

Solution one:

Use the new column-count. DEMO.

Check the browser compatibility.

Solution two:

Use display:inline-block;. DEMO.

Check the browser compatibility.

Solution three:

Using flexbox. DEMO.

Check the browser compatibility.

Solution four:

Use JQuery, I suggest you the Masonry plugin (usually used for galleries) . DEMO.

Upvotes: 2

Related Questions