• youtube embed:
• display: grid on the container, just like flex
• grids can be nested inside of grids
• grid-template-columns: 1fr 94rem 1fr
  • 1fr means “one fraction” and this line basically says “make the middle 94rem, then however much space is left over, just divide it evenly between the left and right”
• grid-template shorthand for grid-template-rows followed by grid-template-columns
  • rows / columns
• setting grid-column-start and grid-column-end :
• grid-area is shorthand for grid-row-start / grid-column-start / grid-row-end / grid-column-end
• if the grid items are wider than the columns, then the grid items will stick out from the columns and overlap each other
  • e.g. if the columns are set with grid-template-columns: 100px 100px 100px; and the items are divs with 60px padding on each side (for a width of > 120px)
  • looks like grid is maybe designed for when you WANT things to overlap?
• if a grid item (div) is smaller than the measurement for the row or column, then the div will get stretched out to equal the row or column size