Flexbox and grid

Meme Machine · 06.04.2018

Если вы вдруг увлекаетесь/работаете с фронтом, а в частности с версткой, то на сегодняшний момент стоит уже задуматься о изучении в верстке флексов и гридов.
Поддержка у них уже норм (если не учитывать старые версии ие)
Из того, что я бы посоветовал, кроме оф документации:

Флексы

Flexbox — это новый способ располагать блоки на странице. Это технология, созданная именно для раскладки элементов, в отличие от float-ов. С помощью Flexbox можно легко выравнивать элементы по горизонтали и по вертикали, менять направление и порядок отображение элементов, растягивать блоки на всю высоту родителя или прибивать их к нижнему краю.
Нажмите, чтобы раскрыть...

(Все ниже кликабельно)

Доступным языком про флексы (RU, бесплатные)
Интерактивчик по флексам ( ENG, бесплатные)
Игра по флексам ( RU, бесплатные)
Флексы от HTML Academy. 1 часть, 2 часть (RU, платные)

По флексам собственно все. Вам этого хватит с головой чтобы в своей верстке применить флексы.

-----------------------------------------------------------------

Гриды

CSS Grid Layout - самая мощная система компоновки из доступных на данный момент в CSS. Это двумерная система, которая может обрабатывать как колонки так и строки, в отличии от Flexbox, который в значительной степени является одномерной системой. При работе с CSS Grid, вы применяете CSS правила и родительским элементам (которые становятся Grid контейнерами) и к дочерним элементам (которые становятся Grid элементами).
Нажмите, чтобы раскрыть...

Руководство по гридам (RU, бесплатно)
Интерактивчик по гридам, автор видосов очень хорошо объясняет (сабы есть), даже если вы не поймете, то примеры будут тоже на видосика, та и просто приятный опенинг. Ах да, его спонсировала Мазила (ENG, бесплатно)
Игра по гридам (RU, бесплатно)

Опять же, скудно на первый взгляд. Но вам этого хватит для проекта первого. Ведь все приходит с практикой.

И всем советую данную статью просто по вебу. Хорошее чтиво на ночь/ в туалете/ пока едешь

Flexbox and grid

Meme Machine