Grokking CSS Design Patterns to Ace Interviews/

...

/

Problem: Nested Multi-Level Centering (Grid + Flex Nesting)

Problem: Nested Multi-Level Centering (Grid + Flex Nesting)

Try to combine CSS Grid and Flexbox across nested containers to center a marker exactly in the viewport.

We'll cover the following...

Problem description

Three nested <div> levels—.level1 (CSS Grid, 100vh), .level2 (Flex), and ...