Сдвигается вёрстка при длинном названии и описании

[Katerina23]

Делаю страницу, где будут отображаться записи три в ряд. Картинки должны быть вровень стоять как-будто это табличная верстка. Вот как должно быть:

а вместо этого я получаю:

Как это можно исправить? Я специально выбрала размещение записей, через div контейнер, чтобы можно было потом быстро подогнать сайт под мобильные устройства.

Вот мои исходники: 

site.rar

[Switch74]

выкладывайте в jsfiddle.net

[mrnobody]

Я так понял, вы хотите чтобы картинки были на одном уровне в строке карточек. Это сложно сделать - нужно найти максимальную высоту заголовка для строки из трех карточек. и вам лучше использовать флексы для построения колонок https://codepen.io/corvus-007/pen/XxZjXP?editors=1100

[Katerina23]

mrnobody, я протестировала на мобильных устройствах. В хром нажала F12, потом CTRL+SHIFT+M. Вёрстка сохраняется так же как на пк.

По идее, при слишком маленьком экране записи должны размещаться по два в ряд или же одна запись в столбик.

[mrnobody]

Вы добавляли метатег?

<meta name="viewport" content="width=device-width, initial-scale=1">

в head?

 

[Katerina23]

Так вот оказывается для чего нужен этот тег, теперь всё работает.

[Katerina23]

У меня ещё галерея есть тоже три в ряд я могу одни и те же стили использовать для галереи, или для картинок нужно отдельные стили создавать? А то я скачала шаблоны сайтов и там в одном шаблоне было несколько три в ряд и для каждого случая использовались отдельные стили.