CSS Floating Divs with different height are aligned with space between them

by

Here is a pure CSS solution. I took this example

Check it out if you want to learn more. He also use jQuery Masonry as fallback.

CSS:

.masonry { /* Masonry container */
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
}

.item { /* Masonry bricks or child elements */
    background-color: #eee;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}

HTML:

<div class="masonry">
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    <div class="item">Neque, vitae, fugiat, libero corrupti officiis sint facilis tempora quidem repudiandae praesentium odit similique adipisci aut.</div>
    <div class="item">Incidunt sit unde minima in nostrum? Incidunt sit unde minima in nostrum?</div>
    <div class="item">Ducimus, voluptates, modi, delectus animi maiores consequuntur repellat quisquam fugiat eum possimus enim culpa totam praesentium magni quae!</div>
    <div class="item">Lorem ipsum dolor sit amet, dicta dolore adipisci hic ipsam velit deleniti possimus cumque accusantium rerum quibusdam.</div>
    <div class="item">Neque, vitae, fugiat, libero corrupti officiis sint facilis tempora quidem repudiandae praesentium odit similique adipisci aut.</div>
    <div class="item">Incidunt sit unde minima in nostrum?</div>
    <div class="item">Incidunt sit unde minima in unde minima in unde minima in nostrum?</div>
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, praesentium consequatur ducimus commodi quam ex illo omnis dicta reiciendis vel nesciunt deserunt aut sequi nam mollitia perferendis ipsam possimus temporibus!</div>
    <div class="item">Ab, adipisci, temporibus eaque quis harum perferendis incidunt cupiditate doloribus dolor numquam voluptates ipsum dolore aspernatur et voluptate ipsam beatae animi culpa.</div>
</div>

Hope this will help you. Thanks.

More Related Contents:

  1. Floating elements within a div, floats outside of div. Why?
  2. CSS Floating Divs At Variable Heights [duplicate]
  3. Advantages of using display:inline-block vs float:left in CSS
  4. How to create equal height columns in pure CSS [duplicate]
  5. Make outer div be automatically the same height as its floating content
  6. Split Div Into 2 Columns Using CSS
  7. How to get Floating DIVs inside fixed-width DIV to continue horizontally?
  8. CSS text ellipsis when using variable width divs
  9. Div side by side without float
  10. Stacking DIVs on top of each other?
  11. How do you easily horizontally center a using CSS? [duplicate]
  12. float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
  13. Footer at bottom of page or content, whichever is lower
  14. Is there a way to make a child DIV’s width wider than the parent DIV using CSS?
  15. Is float for layout bad? What should be used in its place?
  16. How do I right align div elements?
  17. What is the difference between the hidden attribute (HTML5) and the display:none rule (CSS)?
  18. How does object-fit work with canvas element?
  19. How to make a element expand or contract to its parent container?
  20. scale HTML5 Video and break aspect ratio to fill whole site
  21. Disable zoom on a div, but allow zoom on the page (an alternate div)
  22. margin-top not working with clear: both
  23. element not working in Internet Explorer 11
  24. Why can’t I make my div 100% height if I use an HTML5 doctype? How do I get it 100% height
  25. Make floating child visible outside an overflow:hidden parent
  26. How to add a search box with icon to the navbar in Bootstrap 3?
  27. Align vertically using CSS 3
  28. HTML5 image icon to input placeholder
  29. background-image doesn’t appear if is empty?
  30. Horizontal scroll in DIV with many small DIV’s inside (no text)

Leave a Comment