How do I stagger divs like Google Plus?


Tags: jquery,html,css

Problem :

As you see, in Google+, each posts are staggered(?) like this image

Google+

And to implement view like this, I used StaggeredGridView in Android, but I can't make sense which library or CSS tricks is needed to implement this in the web.

Height of each divs are different, and float:left didn't worked as I thought. They made a large space in each divs like this:

Didn't worked with float:left

So how do I make the divs like Google Plus? And are there any key words to find this layout?



Solution :

You could use Flexbox.

.flexbox-container {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
}
.flexbox-container > div.column {
  width: 50%;
  padding: 10px;
}
<div class="flexbox-container">
  <div class="column">
    <div>
      <h3>Lorem Ipsum</h3>
      <p>Ille vivere. Ut ad te quaerebam ... purgare caeli. Sunt uh ... nonnullus propter errorem qui de rebus inter nos et iacere puto suus in causa, id est in mensa. Levir meus, priusquam oppugnarent tempus quis, admonere dicitur. Credo quod idem mihi
        praesidium.</p>
      <p>Ille vivere. Ut ad te quaerebam ... purgare caeli. Sunt uh ... nonnullus propter errorem qui de rebus inter nos et iacere puto suus in causa, id est in mensa. Levir meus, priusquam oppugnarent tempus quis, admonere dicitur. Credo quod idem mihi
        praesidium.</p>
      <p>Ille vivere. Ut ad te quaerebam ... purgare caeli. Sunt uh ... nonnullus propter errorem qui de rebus inter nos et iacere puto suus in causa, id est in mensa. Levir meus, priusquam oppugnarent tempus quis, admonere dicitur. Credo quod idem mihi
        praesidium.</p>
      <p>Ille vivere. Ut ad te quaerebam ... purgare caeli. Sunt uh ... nonnullus propter errorem qui de rebus inter nos et iacere puto suus in causa, id est in mensa. Levir meus, priusquam oppugnarent tempus quis, admonere dicitur. Credo quod idem mihi
        praesidium.</p>
    </div>
    <div>
      <h3>Lorem Ipsum</h3>
      <p>Ille vivere. Ut ad te quaerebam ... purgare caeli. Sunt uh ... nonnullus propter errorem qui de rebus inter nos et iacere puto suus in causa, id est in mensa. Levir meus, priusquam oppugnarent tempus quis, admonere dicitur. Credo quod idem mihi
        praesidium.</p>
      <p>Ille vivere. Ut ad te quaerebam ... purgare caeli. Sunt uh ... nonnullus propter errorem qui de rebus inter nos et iacere puto suus in causa, id est in mensa. Levir meus, priusquam oppugnarent tempus quis, admonere dicitur. Credo quod idem mihi
        praesidium.</p>
      <p>Ille vivere. Ut ad te quaerebam ... purgare caeli. Sunt uh ... nonnullus propter errorem qui de rebus inter nos et iacere puto suus in causa, id est in mensa. Levir meus, priusquam oppugnarent tempus quis, admonere dicitur. Credo quod idem mihi
        praesidium.</p>
    </div>
  </div>
  <div class="column">
    <div>
      <h3>Lorem Ipsum</h3>
      <p>Ille vivere. Ut ad te quaerebam ... purgare caeli. Sunt uh ... nonnullus propter errorem qui de rebus inter nos et iacere puto suus in causa, id est in mensa. Levir meus, priusquam oppugnarent tempus quis, admonere dicitur. Credo quod idem mihi
        praesidium.</p>
    </div>
    <div>
      <h3>Lorem Ipsum</h3>
      <p>Ille vivere. Ut ad te quaerebam ... purgare caeli. Sunt uh ... nonnullus propter errorem qui de rebus inter nos et iacere puto suus in causa, id est in mensa. Levir meus, priusquam oppugnarent tempus quis, admonere dicitur. Credo quod idem mihi
        praesidium.</p>
      <p>Ille vivere. Ut ad te quaerebam ... purgare caeli. Sunt uh ... nonnullus propter errorem qui de rebus inter nos et iacere puto suus in causa, id est in mensa. Levir meus, priusquam oppugnarent tempus quis, admonere dicitur. Credo quod idem mihi
        praesidium.</p>
    </div>
    <div>
      <h3>Lorem Ipsum</h3>
      <p>Ille vivere. Ut ad te quaerebam ... purgare caeli. Sunt uh ... nonnullus propter errorem qui de rebus inter nos et iacere puto suus in causa, id est in mensa. Levir meus, priusquam oppugnarent tempus quis, admonere dicitur. Credo quod idem mihi
        praesidium.</p>
      <p>Ille vivere. Ut ad te quaerebam ... purgare caeli. Sunt uh ... nonnullus propter errorem qui de rebus inter nos et iacere puto suus in causa, id est in mensa. Levir meus, priusquam oppugnarent tempus quis, admonere dicitur. Credo quod idem mihi
        praesidium.</p>
      <p>Ille vivere. Ut ad te quaerebam ... purgare caeli. Sunt uh ... nonnullus propter errorem qui de rebus inter nos et iacere puto suus in causa, id est in mensa. Levir meus, priusquam oppugnarent tempus quis, admonere dicitur. Credo quod idem mihi
        praesidium.</p>
      <p>Ille vivere. Ut ad te quaerebam ... purgare caeli. Sunt uh ... nonnullus propter errorem qui de rebus inter nos et iacere puto suus in causa, id est in mensa. Levir meus, priusquam oppugnarent tempus quis, admonere dicitur. Credo quod idem mihi
        praesidium.</p>
      <p>Ille vivere. Ut ad te quaerebam ... purgare caeli. Sunt uh ... nonnullus propter errorem qui de rebus inter nos et iacere puto suus in causa, id est in mensa. Levir meus, priusquam oppugnarent tempus quis, admonere dicitur. Credo quod idem mihi
        praesidium.</p>
      <p>Ille vivere. Ut ad te quaerebam ... purgare caeli. Sunt uh ... nonnullus propter errorem qui de rebus inter nos et iacere puto suus in causa, id est in mensa. Levir meus, priusquam oppugnarent tempus quis, admonere dicitur. Credo quod idem mihi
        praesidium.</p>
    </div>
  </div>
</div>


    CSS Howto..

    How make frameset resize appropriately with jstree context menu

    Font Styling Issue ~ how to make font smooth/Strong in html css

    How to flip multiple divs using CSS?

    How to apply struts2 tags on existing jsp file without affecting its css and js

    HTML CSS Form - How to center the form on the page?

    How can one create horizontal tree view using CSS and HTML?

    How to put text over Image

    How to draw a responsive shape [closed]

    How do I add a Css file to my Class library?

    CSS opacity, how to have opaque elements in transparent container element

    How to position two divs horizontally within another div

    CSS how translate DIV with whole content in it

    How can I do width = 100% - 100px in CSS?

    Inheriting CSS how do I stop it?

    how to deselect a css style using javascript?

    how to check what css code is invalid using browser plugins [closed]

    How to show one element when click on the another element with css?

    How to morph multi-part css properties with Mootools Fx?

    How to prevent division when using variables separated by a slash in CSS property values

    Jquery: Show/hide menu with single button

    How to set focus int o next tab using tab key?

    How to display vertical text in table headers with auto height / without text overflow?

    How to rotate image when scrolling using CSS transform?

    How to add css library to project generated with angular-cli@webpack

    How to upload image to an existing image src in angularjs, css

    How to make one css input type be displayed the same as another input type

    How to toggle single element with this same class like another

    How can I make this jQuery effect responsive?

    How to preserve css class name through GWT compilation?

    how to make tab bar in jquery mobile?