Используйте комбинацию медиа-запросов и выравнивания текста для достижения этого:
В своем естественном состоянии «text-align: justify» не будет работать, если содержимое строки не будет достаточно длинным, чтобы вызвать разрыв строки. В противном случае текст остается выровненным по левому краю. Мы можем решить эту проблему, предоставив 100% ширину невидимому встроенному элементу в конце строки.
Поскольку «text-align: justify» предназначен для работы с отдельными встроенными словами, он работает с любым встроенным элементом и, что более важно, с любым элементом встроенного блока.
Чтобы учесть все возможные количества элементов в последней строке, количество элементов-заполнителей, которые вам нужно добавить, равно максимальному количеству элементов в строке, минус 2. Эти элементы должны быть вставлены в конец вашей сетки (перед элементом «break», если вы не используете псевдоэлемент для разбиения строки), а затем оставьте его в покое. Поскольку они не занимают вертикального пространства, элементы «местозаполнителя» не влияют на макет, если последняя строка заполнена или если ваш сайт отзывчив и количество элементов в строке изменяется. Пока у вас достаточно заполнителей для самого широкого обзора, все будет в порядке.
Очевидно, что это имеет некоторые смысловые последствия - поскольку нет способа создать какой-либо из этих заполнителей с использованием псевдоэлементов. В сетке, где в последней строке всегда будет максимальное количество элементов, нам вообще не нужно использовать заполнители (просто разрыв), но в большинстве ситуаций CMS они необходимы и должны быть жестко закодированы в ваш HTML .
Просто применив «text-align: justify» к контейнеру и присвоив дочерним элементам «display: inline-block» и процентную ширину, вам больше никогда не придется иметь дело с горизонтальными полями! (Да, и я уже говорил, что при использовании этого трюка вам никогда больше не понадобится использовать float для ваших элементов, так что вы можете помахать на прощание с этими позорными clearfixes и clear divs!)
Мы должны знать, что при использовании «display: inline-block» наши элементы будут зависеть от различных типографских свойств CSS, включая размер шрифта, высоту строки, выравнивание по вертикали и расстояние между словами. Эти свойства будут иметь видимое влияние на пробелы в вашем макете, но могут быть легко скорректированы или удалены по мере необходимости. В 99% случаев установка «font-size: 0.1px;» для контейнера и «vertical-align: top» для дочерних элементов должна помочь.