Day 12. Rounding up the CSS Grids Course

Notes

• object-fit: The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container.
• This property tells the content to fill the container in a variety of ways; such as “preserve that aspect ratio” or “stretch up and take up as much space as possible”.
• Instead of letting images be distorted on different viewport sizes, we can set up the image to look good on all screens by specifying the object-fit property.
• Values are fill, contain, cover, none, scale-down. All Values of The CSS object-fit Property
• Array.from() takes a string or another array and returns a new array. If the argument is a string, it’s converted to an array with the string characters as elements of the array.
• If the argument is an array, it returns another array with the elements of the previous array.
• If the argument is a literal, it returns an array with the literal as elements.
• It can also take an additional property, a function to run on every argument.
• grid-auto-flow is the exact equivalent to flex-direction in CSS Grid. The default is grid-auto-flow: row. Other values are grid-auto-flow: column and grid-auto-flow: row dense or grid-auto-flow: column dense;
• We can use a shorthand for grid-template-rows, grid-template-columns with grid-template : 1fr 1fr / 1fr 1fr;
• Before and after elements are considered grid items on a grid parent…