4. Layouts - flex, grid #

Created Sunday 25 April 2021

Why #

Laying out children in an element was hard in CSS for a long time. display: flex and display: grid solved that problem.

In simple words - with this knowledge, one can control/set nested elements as 1D or a 2D block, and with automatic responsive behavior for the children being layed out.

Resources #

1. Flex - https://css-tricks.com/snippets/css/a-guide-to-flexbox/, simple and exhaustive
2. Grid - https://css-tricks.com/snippets/css/complete-guide-grid/, simple and exhaustive
3. Flex game - https://flexboxfroggy.com
4. Grid game - https://cssgridgarden.com
5. Important detail in video by Rachel Andrew (~90 min)