For example: Above is a gallery of images with images of varying width and height which is a perfect use case for CSS grids.
Note: The height of the rows is tied to the viewport width, so that the cells maintain its aspect ratio perfectly fine. We have 8 rows each with the height of 5 viewport width. I experimented with these heights and came to the conclusion that 5% of viewport width is the perfect size for the height. We are doing this by setting the height of the row to 5vw (viewport width).
Note: All direct children of grid automatically become grid items.
Note: The object fit property only works if we set the width and height properties.
Note: By default the grid items are laid out according to the grid auto placement rules.
Note: Now, we will position other items on the same principles which we learned above.