Вопрос дилетантский, поэтому проявите снисхождение. Посмотрел недавно флексбоксы и гриды, но пока еще не успел поверстать макеты, только учебные примеры. Давно не занимался версткой. Сейчас пришлось вспоминать нюансы.
При флоатах надо nth-child, clearfix добавлять, когда элементы плывут из-за динамической высоты.
При инлайн-блоках пробелы есть с которыми бороться надо отрицательными марджинами, выставлением фонт-сайза 0, в разметке убирать пробелы.
У фелксах все замечательно с динамическими размерами элементов, выравниваем по вертикали, горизонтали. Хорошо подходят, когда разметка одномерная, иногда надо добавлять обертки для решения некоторых задач. Сортировка возможна также.
Поддержка сейчас у гридов, флексах адекватная, насколько могу судить по сайту caniuse.com
Много информации и способов, поэтому размытое впечатление. Кто то фреймворк использует, кто то пишет, что большинство макетов простые и фреймворк не нужен, а если что то нестандартное, то можно свою написать. Понятно, что гриды и флексы не взаимозаменяемы, можно совмещать обе технологии.
Но с другой стороны бутстрап 4 построен на flexbox и ты уже существуешь в такой системе координат.
Какой алгоритм работы стоит применить? Попробовать разные css фреймворки и с нуля написать подобную им сетку облегченную для лучшего понимания или верстать просто как лучше вижу, основной лейаут на гридах, некоторые элементы на флексбоксах? И если что то не получается, то уже спрашивать на тостере на конкретном случае? Просто уроки с различной давностью, также само как и статьи, поэтому советы разные.
P.S Хочется просто при взгляде на макет заранее записать цвета, отступы в переменные, определить какую сетку для верстки использовать, как элементы разделить структурно и т.д Давно когда верстал, то не сильно заморачивался, но тогда не было флексов, гридов.
Честно говоря всегда избегаю сеток, если имею дело с макетами отрисованными дизайнерами. Так как они любят выползать за сетку!))) Поэтому придерживаюсь построения структуры при просмотре макетов. Если речь идет не о одностраничном сайте, то внимательно исследую каждую страницу и на основании этого выстраиваю свой скелет для проекта.
Терпеть не могу когда берешь сайт, смотришь на верстку и там сетка. И потом начинается - тут переопределили, там переопределили и т.д.
СЕТКАМИ лучше верстать бутстрапом, потому что потом после Вас могут проще поправить или доделать.
И уж если надо просто попрактиковаться, или что-то выбивается из сеточной разметки - тогда делать свою. Упрощайте себе и другим работу.
Вы делаете хороший зазор, когда кто-то будет натягивать вашу верстку на движок. Я обычно, когда верстаю, уже имея опыт в работе с CMS и фреймворками - сначала продумываю логику шаблона по основным направлениям (какая страница, для чего она, что у нее динамично, что статично). Потом делаю flex (резиновый) layout, в котором уже будут grid элементы.
Да забудте уже про какие-то сетки. Просто мыслите понятием дизайн системы. Тогда вся ваша сетка будет - один класс .container, а все остальное уже исходя из текущей задачи. Флексбокс и гриды уже сами по себе сетка))
Простой
Простой
