CSS multi-row table without "display: table-row"

Question

I need to create a multi-row table without using display: table-row.

Because it is formatted from a template, and it is impossible to insert "row" code between "some" items. All items are the same.

What I need: 3 columns and 3 rows, and the same height for all columns.

If I remove float: left then all items is displayed in one row. With it, they all have different height.

HTML

<ul>
  <li>
    <p>ddd<br>ddd</p>
  </li>
  <li>
    <p>ddd</p>
  </li>
  <li>
    <p>ddd<br>ddd<br>ddd</p>
  </li>
  <li>
    <p>ddd</p>
  </li>
  <li>
    <p>ddd<br>ddd</p>
  </li>
  <li>
    <p>ddd<br>ddd<br>ddd</p>
  </li>
  <li>
    <p>ddd<br>ddd<br>ddd</p>
  </li>
  <li>
    <p>ddd</p>
  </li>
  <li>
    <p>ddd<br>ddd</p>
  </li>
</ul>

CSS

ul {
  display: table;
  width: 100%;
  height: 100%;
}

li {
  display: table-cell;
  height: 100%;
  width: 33%;
  float: left;
}

p {
  background: #eeeeee;
  margin: 2px;
  height: 100%;
}

http://jsfiddle.net/7ca4deko/

Answer 1

try using display: flex

http://jsfiddle.net/dnomLjue/1/

ul {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

li {
  width: 33%;
  list-style-type: none;
}

p {
  background: #eeeeee;
  margin: 2px;
  height: calc( 100% - 2px);
}

<ul>
  <li>
    <p>ddd<br>ddd</p>
  </li>
  <li>
    <p>ddd</p>
  </li>
  <li>
    <p>ddd<br>ddd<br>ddd</p>
  </li>
  <li>
    <p>ddd</p>
  </li>
  <li>
    <p>ddd<br>ddd</p>
  </li>
  <li>
    <p>ddd<br>ddd<br>ddd</p>
  </li>
  <li>
    <p>ddd<br>ddd<br>ddd</p>
  </li>
  <li>
    <p>ddd</p>
  </li>
  <li>
    <p>ddd<br>ddd</p>
  </li>
</ul>