12 Weeks

Day 12. Rounding up the CSS Grids Course

October 14, 2019


  • 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…

Quick and Scrappy notes from 12 weeks of learning UX Engineering for the web. More