Сделать сетку из четырех divs развернуть в соответствии с самой высокой высотой

Question

Я пытаюсь создать сетку макета, которая составляет все дочерние divs, чтобы соответствовать самому высокому div в группе. Например, у меня есть сетка 2x2, причем каждый div в сетке содержит некоторый текст. Div, который содержит наибольший текст, является самым высоким и должен подталкивать высоту на остальных 3 divs, чтобы они соответствовали.

Я могу получить высоты div для каждой строки, используя display: flex; и flex-wrap: wrap;, но мне нужно, чтобы все строки соответствовали высоте.

Можно ли выполнить с помощью CSS, или мне нужно прибегнуть к jQuery?

<section class="grid two"> 
    <div> 
     <div> 
      <p>The top left div</p> 
     </div> 
    </div> 
    <div> 
     <div> 
      <p>The top right div</p> 
     </div> 
    </div> 
    <div> 
     <div> 
      <p>The bottom left div</p> 
     </div> 
    </div> 
    <div> 
     <div> 
      <p>The bottom right div</p> 
      <p>this has more text, and should casue the rest to strecth to match its height.</p> 
     </div> 
    </div> 
</section> 

И мой текущий CSS является:

.grid { 
    display: flex; 
    flex-wrap: wrap; 
} 

.grid > div { 
    box-sizing: border-box; 
    display: flex; 
    flex-directon: column; 
    padding: 10px; 
    width: 50%; 
} 

.grid > div > div { 
    background: #EEE; 
    flex: 1 1 auto; 
    width: 100%; 
} 

Вот скрипка: http://jsfiddle.net/g41xas6w/

---

Update 1: Я не могу использовал фиксированную высоту по двум причинам:

1. Клиент сможет редактировать этот текст, поэтому я не всегда могу знать, какой будет высота.
2. Это отзывчивый сайт, поэтому мне нужно сделать целую кучу перерывов, чтобы всегда отображаться на правильной высоте.

Answer 1

http://brm.io/jquery-match-height/

Пожалуйста, смотрите ссылку выше. Эти ребята создали плагин jQuery для достижения эффекта, которым вы пользуетесь.

Answer 2

Если поставить height тег в .grid > div с, например 200px все это будет 200px

.grid > div { 
    box-sizing: border-box; 
    display: flex; 
    flex-directon: column; 
    padding: 10px; 
    width: 50%; 
    height: 200px; 
} 

Answer 3

Ваше решение будет работать только для 4 DIVs в одной горизонтальной линии. Измените ширину и посмотрите! Если вам нужен 2X2, динамически получать высоту всех 4, чтобы быть одинаковыми, невозможно только с CSS. Вам нужно либо использовать скрипт для управления им, либо установить высоту, которая перестанет быть динамичной!