CSS Grid Practice

Directions

Below you will write HTML and define CSS grids for each of the below sections within this article element. In each of the practice grids, use a grid gap of at least 15px, a minimum height of 100px, and contrasting background colors to denote the difference between each grid item on the tracks.

1. In section fr-unit, you write at least 8 HTML block elements of your choice and apply a basic fr unit scheme to these children of this section, where there are 4 fractional units per track.
2. In section repeat and fr units, use the same elements as above and rewrite the same grid with the repeat method and the fr unit.
3. In section minmax, you must write at least 8 HTML block elements of your choosing and define a grid wherein each item is at least 100px wide and maximum of 350px wide.
4. In section minmax and repeat, you must write at least 8 HTML block elements of your choosing and use a minmax notation within a repeat method that creates a responsive grid that automatically fits your desired min and mix item sizes.
5. In section explicit grid with line-based positioning, recreate the following image using explicit grid positioning definitions. (Click on the image to see a larger version, if necessary.)
   

Be sure to inspect your pages in your browser. Change the width of the page, so you can see how they behave.