CSS лэйауты всегда были непростой темой. Многие до сих пор верстают float'ами. Пора бы уже двигаться вперёд — флексбоксы поддерживаются уже более чем 95% браузеров (http://caniuse.com/#feat=flexbox). А скоро появится еще и Grid Layout, которые полностью перевернёт ваше представление о вёрстке. Так что держите подборку материалов, которая поможет вам освоиться с самыми свежими технологиями.
Полный гайд по flexbox от Криса Коера с css-tricks — https://goo.gl/sLNosQ
Flexbox абсолютно логичен (почти абсолютно): разбор неясных моментов — https://goo.gl/CKb1Nt
Flexbox, конечно, больше подходит для отдельных модулей, в чем вы можете убедиться на сайте Flexbox Patterns (http://goo.gl/EzmE7I): подборки готовых решений на flexbox. Но пока нет широкой поддержки Grid Layout с помощью flexbox можно решать и более "глобальные" задачи вроде сеток, классического Holy Grail Layout (трёхколоночный лэйаут) — как делать такие вещи можно посмотреть на Solved by Flexbox (https://goo.gl/k6smOQ).
Теперь о CSS Grid Layout, который изменит вашу жизнь в будущем (на самом деле только подход к вёрстке).
Сначала включим его в своём браузере (IE10, кстати по умолчанию поддерживает) — http://goo.gl/qO2tHz
Полный гайд по Grid Layout от Криса Коера с css-tricks (талантливый человек и о flexbox и о grid layout пишет, следите за его деятельностью) — https://goo.gl/lk3nxD
Передохните от чтения и попрактикуйтесь — 27 уроков для освоения Grid Layout на практике — http://goo.gl/Qy09T9
Grid Layout + Flexbox = ? — разбор вопроса о том, как подружить две технологии — https://goo.gl/abMLsx
Не зависайте в каменном веке — учите новые технологии!
#grid@jsraccoon
#flexbox@jsraccoon
