Homework 4 - Flexbox, CSS Grid (optional)

[Chebutalio]

Завдання:
0. Створити папку з домашкою 4-layouts

1. В середині має бути дві папки: flexbox, grid;
2. В папці flexbox потрібно навєрстать Holy Grail Layout;
3. В папці grid потрібно також навєрстать Holy Grail Layout;
   Holy Grail Layout - https://i.stack.imgur.com/yTzXI.jpg

Кольори можете використати інші.

Корисні посилання:
Слова, що часто використовуються в CSS-класах: https://github.com/yoksel/common-words

Ігри для вивчення Flexbox:

https://flexboxfroggy.com/ (дуже рекомендую)
https://codingfantasy.com/games/flexboxadventure (опціонально)
https://knightsoftheflexboxtable.com/ (опціонально)
https://mastery.games/flexboxzombies/ (опціонально)

Grid:
https://cssgridgarden.com/ (дуже рекомендую)
https://codingfantasy.com/games/css-grid-attack (опціонально)

A Complete Guide to Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

A Complete Guide to Grid
https://css-tricks.com/snippets/css/complete-guide-grid/

Flexbugs
A community-curated list of flexbox issues and cross-browser workarounds for them.
https://github.com/philipwalton/flexbugs

Відео та блог о Grid & Flexbox от Jen Simmons:
https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag
https://gomakethings.com/layout-land/

CSS директива Supports():
https://medium.com/web-standards/supports-92dba6de7ae7
https://css-tricks.com/how-supports-works/
https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

Для перевірки браузерної підтримки CSS/JS фич
https://caniuse.com/
https://www.caniemail.com

Чому використовувати flex order не дуже гарна ідея:
https://www.matuzo.at/blog/the-dark-side-of-the-grid-part-2/#visual-order

Autoprefixer:
Штука, що проставляє автоматично префікси в вашому CSS:
https://github.com/postcss/autoprefixer
https://autoprefixer.github.io/