Lord_Dantes, хотел бы я узнать, какую величину указать в max-width.
Если изначально max-width = 25% то в строке помещается 4 карточки, уменьшаем экран до того момента как последняя 4-ая карточка перенесется на новую строку и теперь мы имеем в первой строке 3 карточки с max-width: 25%. 25% * 3 = 75% а нам требуется 100%.
Re{Actor} Дмитрий Вершанский, то что IE их не поддерживает, на это можно закрыть глаза и запретить просмотр сайта из данного браузера. Но к сожалению есть мобильные браузеры, которые тоже не поддерживают:(
Ankhena, мне лично понравился grid-gap. В примере выше, не напрягаясь везде одинаковые отступы. Также в панели разработчика, наведя на грид можно визуально увидеть сетку.
Накидал такой пример, вроде отлично все получилось без флексбоксов, тогда вопрос в каких случаях лучше flexbox чем grid? Могу догадываться, что наверно в случае меню в моей примере, когда там очевидно что будет только одна строка?
То есть, я должен блоки прорабатывать так чтобы они всегда были независимы. Допустим возьмём список пользовалей. Список имен пользователей в колонку, мне захотелось в каком то месте сайта расположить все имена в строчку. Я добавляю модификатор и радуюсь жизни?)
Как раз на этом сайте и читал, там плохо разжевали как миксовать:( спасибо за ответ, буду пытаться по полочкам у себя в голове все разложить. Думаю модификатор может решить мою проблему. А наследование в CSS не будет верным решением?
.header .user__avatar {} (Хотя вроде БЭМ и выступает противником наследования)
Если изначально max-width = 25% то в строке помещается 4 карточки, уменьшаем экран до того момента как последняя 4-ая карточка перенесется на новую строку и теперь мы имеем в первой строке 3 карточки с max-width: 25%. 25% * 3 = 75% а нам требуется 100%.