Using css grids and flexbox properly to make your children work together

Jim and Pam from TV’s “The Office”

I love this build component because it utilizes two familiar layout tools in CSS, namely grids and flexbox, and an expressive HTML syntax.

Click “Open Sandbox” top view the Sandbox in full sreen mode.

I think of Grid and Flexbox as a set of layout constraints that are placed on an HTML element that defines the beahviour of its children. You no longer need to explicitly tell Jim to sit next to Pam. You can instead create a parent Office, which will contain the seating arrangements (layout constraints) Jim and Pam along with the rest of the oiffice will adhere to. This makes your CSS easier to read, and you can write very simple expressive HTML, like in the example above.