Hi guys, so I came across this exercise that I am nowhere near skilled enough to attempt but I am curious about the solution. If anyone has some free time to solve it with an explanation added I would really appreciate the insight 
Here it is:
In the zip file is a JPG of an example of a basic grid system. Develop this grid system using HTML, CSS and media queries so that the items display as:
- 1 per line on mobile screens (320px -> 767px)
- 3 per line on tablet screens (768px -> 1023px)
- 5 per line on desktop screens (1024px+)
Notes:
- No flexbox, CSS grid, absolute positioning, or inline-block displaying may be used. Only float based CSS properties (float, clear etc.)
- No CSS libraries or processors such as Bootstrap, Tailwind, SCSS may be used. Only vanilla CSS.
- All classes must have semantic naming conventions.
- No Javascript is neccessary.
- The heading typography is 32px Arial and the text is 16px Arial.
- Spacing in between items and in between items & the edge of the screen must be identical.
Result must be delivered as a single HTML file and a single CSS file.
Good luck.!
Image example:
img|329x280
