SelenIT

Судя по всему, дело в дефолтном вертикальном выравнивании по базовой лини текста (vertical-align: baseline), для инлайн-блоков эта линия — низ последней строки текста. Можно исправить, изменив vertical-align на top или bottom. Но вообще на инлайн-блоках (а до них на флоатах, а еще раньше на таблицах) такое раньше делали вынужденно, «от бедности» — из-за отсутствия нормальных кроссбраузерных инструментов именно для горизонтальной раскладки блоков. Сейчас эта задача гораздо проще и надежнее решается флексбоксами (а то и гридами), а браузерами, не понимающими флексбоксов, смело можно пренебречь.

Сейчас мало кто проверяет сырую разметку, потому что она бывает мало связана с итоговой DOM, всё самое интересное рендерится на клиенте хитрыми скриптами и фреймворками:). Но если проверять, то лучше вот этим (его автор еще давно объяснял, почему).

Зачем для этого скрипт? Просто заменить height на min-height – не решение?

Это задача не для флексов, флексы не умеют объеднять строки/столбцы. А вот на гридах она решается элементарно (даже с поддержкой IE11 через Autoprefixer проблем возникнуть не должно, ничего из неподдерживаемого там тут вроде не требуется).

Может, я чего-то не понимаю, но... overflow-y: auto – не то?

В задаче требуется вертикальная связь между элементами в колонках. Гриды дают ее «из коробки». Флексбоксы (в т.ч. псевдосетки на них а-ля Бутстрап) могут до некоторой степени *имитировать* ее, но цена этого — потеря гибкости (в которой главная сила флексбоксов). Вот если вертикальные связи не нужны, а нужно наоборот гибкое заполнение места по горизонтали независимо от соседних рядов (что «из коробки» делают флексбоксы) — вот туда пихать гриды было бы глупо, тут я бы согласился. Флексбоксы и гриды дополняют друг друга, где у одних слабость — у других сила, и наоборот:)

Грид — это и есть сетка. Гибкая и универсальная. «Сетки» а-ля бутстрапные .col-* и т.п. — на самом деле только имитация сетки для одного-двух частных случаев (а-ля 12 колонок фиксированной ширины), по сути костыли. Имхо, глупо скорее прикручивать костыли там, где задача просто и естественно решается без них...

Грибы предназначены для выстраивания элементов по сетке:). Каркас сайта часто представляет собой сетку, поэтому гриды подходят для него лучше всего остального. Но это не значит, что они предназначены *только* для каркаса и не годятся для других сеток (а тут — именно сетка, хоть и гибкая).

Это только так кажется;) Никогда не доверяйте разметке, всегда смотрите, что показывает DOM-инспектор.

Как минимум, таблице table-layout:fixed надо бы задать. Если не поможет, стоит вдобавок к нему попробовать width вместо max-width для ячеек. Другой путь — задавать эти стили не ячейке, а вложенному в нее диву.

С проблемой не связано (скорее всего), но сходу возник вопрос по коду: зачем display: inline; рядом с float: left;? Единственное осмысленное применение такому сочетанию, которое приходит на ум — борьба с «удвоением margin-ов» в IE6-, но неужели кто-то еще на это оглядывается?..

Флексбоксы — первый способ именно раскладки блоков в CSS, который не хак. Гриды — второй. Остальное — хаки. Флоаты изначально предназначены для врезки иллюстраций в текст, на безрыбье их можно использовать для размещения блоков, но нужны «клирфиксы» или хаки для отдельного блочного контекста. Инлайн-блоки изначально для вставки чего-то «кнопкоподобного» в текст же, на безрыбье ими тоже можно размещать блоки, но приходится следить за форматированием исходника или «скукоживать» пробелы между тегами хаками же. Таблицы изначально для табличных данных, табличными стилями в принципе можно размещать блоки, но иногда это сбивает с толку скринридеры (впрочем, насколько я в курсе, этот баг браузеры в основном поправили) и в их реализации часто слишком много неочевидной и не всегда хорошо документированной магии. Знать полезно их все. Иногда попадаются очень специфические задачи, в которых преимущества чего-то одного перевешивает его издержки (например, той же самой "магией таблиц" можно сделать "призрачную" обертку-ячейку для нескольких соседних элементов сразу, если менять разметку нельзя). Но по умолчанию всегда рациональнее использовать инструменты по основному назначению, а не «героически преодолевать» самому себе созданные трудности.

Упс, имел в виду 2-й блок, а написал 3-й (смотрел на сетку на флоатах, а думал про сетку на колонках, видимо). Приношу извинения! Второй блок (плавающий) накладывается на 4-й и выталкивает его контент вниз (под себя), поэтому общая высота 4-го блока складывается из высоты 2-го + высота контента 4-го + его отступы. 1-й и 3-й плавающие блоки накладываются на padding 4-го и не пересекаются с его контентом, поэтому на его высоту не влияют.

Высота берется из особенностей работы блочного контекста форматирования. Блочные боксы без clear идут друг за другом, разделенные лишь «схлопнутыми» margin-ами, а float-ы проходят сквозь них, расталкивая их содержимое. Поэтому 2-й плавающий блок не выталкивает сам 4-й блок вниз, а накладывается на него. Но если добавить 4-му блоку clear: right, то он перестанет включать в себя высоту 2-го блока (и 2-й блок не будет накладываться на его вложенный блок, так что можно будет убрать у последнего display:inline-block и width).

Это так. Но браузеры, которые не поддерживают гридов сейчас — это в основном или старые мобильные, или IE на старых windows-машинах. Для таких браузеров может быть оправдана деградация до чего-то попроще. Кстати, если можно зафиксировать высоту карточек, то для такой раскладки вполне можно сделать фолбэк на старых добрых флоатах.