0

I'm looking at Pinterest as a design inspiration, where they have fixed width column, but each of the grid items fill all of the available space (and have variable heights). Here is an example:

enter image description here

My first thought was that flexbox would help me out here, but I didn't have much luck. Here was what I had tried:

<!DOCTYPE html>
<html>
<head>
  <style>
    .flex-container {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-content: flex-start;
      align-items: flex-start;
    }

    .flex-item {
      margin: 10px;
      background-color: #3299bb;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }
  </style>
</head>
<body>
<div class='flex-container'>
  <div class='flex-item' style='height: 200px; width: 800px;'>
    <p>#1</p>
  </div>
  <div class='flex-item' style='height: 50px; width: 200px;'>
    <p>#2</p>
  </div>
  <div class='flex-item' style='height: 50px; width: 200px;'>
    <p>#3</p>
  </div>
</div>
</body>
</html>

My question is reasonably simple. How do you set your css up to make this kind of design a possibility?

zebra
  • 6,373
  • 20
  • 58
  • 67
  • Hi @zebra, questions about implementation are better suited for StackOverflow. – Daniel Brown Feb 06 '16 at 23:16
  • You might try `flex-direction:column`...otherwise it requires javascript. - http://stackoverflow.com/questions/8470070/how-to-create-grid-tile-view-with-css – Paulie_D Feb 07 '16 at 12:39

1 Answers1

0

here is a great plugin that does exactly that.

http://masonry.desandro.com/

You can use it with jQuery or Vanilla JS

Here is another approach to this with CSS only

http://w3bits.com/css-masonry/

dimshik
  • 1,251
  • 15
  • 17