Creating a basic grid system with only HTML and vanilla CSS

#1

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 :slight_smile:

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