Можно ли использовать CSS для отображения элементов с разной высотой в стиле сетки?

Question

У меня есть сетка в HTML, состоящая из элементов разных размеров.Я хотел бы отображать элементы в виде сетки - как по горизонтали, так и по вертикали.

В прошлом я использовал javascript - как библиотека masonry .Но мне интересно, теперь это возможно с помощью CSS с использованием Flex.

Пример 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>

Пример 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 здесь: http://jsfiddle.net/BaronGrivet/pcwudrmc/60883/

Используя flex-direction: row;, я получаю следующий вывод - размер элементов соответствует наибольшему элементу в каждой строке:

Изменение на flex-direction: column; - - я получаю следующий вывод - где элементы переполняют родительский DIV:

Я бы предпочел использовать flex-direction: column; но оберните элементы вправо, когда они достигнут нижней части родительского DIV.В этом примере «Элемент 4» будет в верхней части нового столбца.

Возможно ли это в CSS?

Кажется странным, что Flex выполняет обтекание по вертикали, используя row, но необтекание по горизонтали с использованием column.

Answer 1

Вы просто пропустили небольшую деталь: у вас есть два контейнера, и вы применили flex к внутреннему контейнеру, где вы не указали фиксированную высоту, поэтому весь этот контейнер переполняет внешний контейнер своим содержимым.Вам нужно добавить height:100% (или min-height:100%) во внутренний контейнер, чтобы избежать переполнения и допустить перенос:

.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>