Почему выпадает 4-я картинка в секции статей и как это исправить

При разработке адаптивных макетов часто возникает ситуация, когда на определённом разрешении (например, 768px) последний элемент в flex-контейнере выпадает на новую строку или обрезается. В вашем случае секция .articles ломается при ширине окна 768px: четвёртая карточка статьи выходит за пределы контейнера или отображается некорректно. Рассмотрим основные причины и способы решения.

Причины выпадения элемента во flex-контейнере

Вы используете flex-wrap с отступами, что может привести к несоответствию расчётной ширины при изменении размеров вьюпорта. В вашем CSS задано:

.articles-list { --offsets: 1; flex-wrap: wrap; gap: var(--gap); } .articles-item { width: calc((100% - (var(--offsets) * var(--gap))) / (var(--offsets) + 1)); }

Проблема в том, что при разрешении 768px значение --gap может быть больше, чем предполагалось, или сам контейнер имеет дополнительные отступы, из-за чего calc() не вмещает четыре элемента в одну строку. Кроме того, если --gap не определён глобально, браузер подставляет значение по умолчанию (0) или использует унаследованное значение, что также нарушает расчёт.

Некорректная работа height: 100%

Рекомендация указать height: 100% для .blog-preview не решает проблему, потому что высота flex-элемента зависит от содержимого и контейнера. Даже если задать высоту 100%, ширина остаётся неправильной, и элемент всё равно выпадает. Высота влияет только на вертикальное выравнивание, а не на горизонтальное размещение.

Как исправить layout на 768px

Есть несколько проверенных способов решить проблему с четвёртой картинкой.

1. Явно задайте ширину для каждого элемента

Вместо сложного calc используйте медиазапрос для разрешения 768px, где чётко пропишите ширину для .articles-item:

@media (max-width: 768px) { .articles-item { width: calc(50% - var(--gap) / 2); } }

Так вы гарантируете, что в строке поместится ровно два элемента, а не четыре. Четвёртый элемент перейдёт на вторую строку, но не выпадет.

2. Установите фиксированное значение gap

Убедитесь, что переменная --gap определена и имеет фиксированное значение, например --gap: 20px. Если она не задана, calc может работать непредсказуемо. Добавьте в корневой селектор:

:root { --gap: 20px; }

3. Используйте flex-basis вместо calc

Можно отказаться от calc и задать flex-basis: 23% с учётом отступов, но это менее гибко. Лучше комбинировать flex-basis с медиазапросами.

4. Проверьте box-sizing

Убедитесь, что у всех элементов, включая .articles-item и .blog-preview, стоит box-sizing: border-box. Если у картинки или контейнера есть padding или border, они увеличат фактическую ширину, и calc не учтёт это.

Пошаговый план действий

• Проверьте значение --gap - оно должно быть одинаковым во всех медиазапросах.
• Добавьте медиазапрос для 768px, где переопределите ширину .articles-item на calc(50% - 10px) (если gap = 20px).
• Убедитесь, что box-sizing: border-box применяется ко всем элементам.
• Если используете height: 100% для .blog-preview, задайте родителю .articles-item явную высоту или используйте display: flex на уровне .blog-preview.

Заключение

Проблема с выпадающей четвёртой картинкой при 768px решается корректировкой ширины элементов через медиазапросы и правильным заданием переменной gap. Не полагайтесь только на height: 100% - это не влияет на горизонтальное размещение. Используйте простой и понятный расчёт ширины для каждого брейкпоинта.