I'm sort of obsessed with the editing in your videos right now. Would you mind sharing any keynote file that you've used for one of these videos so I can see how it was done?
The whole video was clear up until the very end. You were showing how easy & seamless it is to change. But then at the end we have a red box at the bottom which has 'span 2' although it is a green-box declared by .green class? I am confused. Does the grid-template areas make grid-area redundant, i.e. could you have deleted all of the old code with span and stuff or not?
No old code deletion stuff occurred. But below is an explanation. `grid-template-areas` and `grid-area` work _together_. At the end, `grid-column: span 2` was what became redundant. More precisely, it got ignored due to `grid-area`. I admit I didn't focus on explaining how these props worked, but here's a deeper explanation about what happened at 4:30. The areas prop on the container say that element with `grid-area` = `red-box` should occupy the two cells in the last row. The `grid-area` is `red-box` on `.red`. This makes the red box occupy the last column. Additionally, the areas prop on the container say that an element with `green-box` as their `grid-area` will be placed at the top right position of the container. `.green` with its `grid-area` makes it sit at the top right.
i am confused. you say 2 rows, but then an arrow is going from top to bottom to illustrate this. isnt a ROW, from left to right? isnt a column from top to bottom? I am confused.
![[css] Flex vs Grid](/img/logo.svg){kind=logo}
