First ** CONGRATS 🎊 ON** completing the challenge.
For your first question.
-
It really depends on you. If you have interest in sass ,you should definitely go for it. Oh and for this project, sass is not necessary for it ** my opinion* *
-
CSS Grid is for layout; Flexbox is for alignment.
CSS Grid and Flexbox are layout models that share similarities and can even be used together. The main difference is that you can use CSS Grid to create two-dimensional layouts. In contrast, you can only use Flexbox to create one-dimensional layouts. That means you can place components along the X- and Y-axis in CSS Grid and only one axis in Flexbox.
With CSS Grid, you can align components into columns and rows. This feature makes it ideal for larger layouts that must be divided into sections. In other words, this type of layout will have elements that need to overlap and layer rather than being linear.
Flexbox
With Flexbox, you can lay out and align elements in a container even if you don’t know the size of those elements or if the size might change. That’s because a flex container is, well, flexible: it expands the flex elements to fill space when it’s available and shrinks them to prevent overflow when it’s not.
-
If I understand correctly, you are saying that the content is centered horizontally by default, but that the body needs a height: 100vh to center the content vertically.
They take up the entire width of the screen
They only take up as much height as is needed to display their content (they have a default height of auto).
If your div is a flexbox with the content centered, even if the content is centered vertically, the div will still only expand downwards as far as it needs in order to fit the tallest element inside of it. Since the div is still at the top of the screen, even if its content is centered vertically inside the div, the content will appear at the top of the screen because the div is only as tall as the content and because the div is at the top of the screen.
However, the height: auto default property of body can be overridden. If you set the height to 100vh, you force the div to be 100vh of the height of its parent element, the page. The div would then have a bunch of extra space for the content, and due to the flex rule, it would position the content in the vertical center of that extra space.
