Can I use CSS to display items with a different height in a grid style?

Question

I have a grid in HTML made up of different sized items. I'd like to display the items in a stacked grid - both horizontally & vertically.

In the past I would have used javascript - like the masonry library. But I'm wondering if it's now possible with CSS using Flex.

Example HTML:

div class="wrapper">
  <div class="grid">
    <div class="item">
      <h2>Item 1</h2>
      <ul>
        <li>1</li>
      </ul>
    </div>
    <div class="item">
      <h2>Item 2</h2>
      <ul>
        <li>1</li>
        <li>2</li>
      </ul>
    </div>
    <div class="item">
      <h2>Item 3</h2>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>

Example CSS:

.wrapper {
  width: 480px;
  height: 420px;
  outline: 1px solid #f00;
  padding: 10px;
}

.grid {
  display: flex;
  flex-direction: row OR column;
  flex-wrap: wrap;
}

.item {
  padding: 10px;
  width: 100px;
  outline: 1px solid #00f;
}

JsFiddle here: http://jsfiddle.net/BaronGrivet/pcwudrmc/60883/

Using flex-direction: row; I get the following output - where the items get sized to the largest item on each row:

Changing to flex-direction: column; - - I get the following output - where the items overflow the parent DIV:

My preference would be to use flex-direction: column; but have the items wrap to the right when they reach the bottom of the parent DIV. In this example "Item 4" would be at the top of a new column.

Is this possible in CSS?

It seems strange that Flex is wrapping vertically using row but is not wrapping horizontally using column.

Answer 1

You simply missed a small detail: you are having two container and you applied flex to the inner container where you didn't specify the fixed height, so this whole container is overflowing the outer container with its content. You need to add height:100% (or min-height:100%) to the inner container in order to avoid the overflow and allow the wrap:

.wrapper {
  width: 480px;
  height: 420px;
  outline: 1px solid #f00;
  padding: 10px;
}

.grid {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height:100%;
}

.item {
  padding: 10px;
  width: 100px;
  outline: 1px solid #00f;
}

<div class="wrapper">
  <div class="grid">
    <div class="item">
      <h2>Item 1</h2>
      <ul>
        <li>1</li>
      </ul>
    </div>
    <div class="item">
      <h2>Item 2</h2>
      <ul>
        <li>1</li>
        <li>2</li>
      </ul>
    </div>
    <div class="item">
      <h2>Item 3</h2>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>
    <div class="item">
      <h2>Item 4</h2>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>      
      </ul>
    </div>
    <div class="item">
      <h2>Item 5</h2>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>
    <div class="item">
      <h2>Item 6</h2>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>
    </div>  
    <div class="item">
      <h2>Item 7</h2>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
      </ul>
    </div>  
    <div class="item">
      <h2>Item 8</h2>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
      </ul>
    </div>  
  </div>
</div>