Grid 3x3 (1:1)

We can create a grid full of items with constrained proportions by using a somewhat hacky padding CSS trick. If we use % when setting padding on an element the padding is set relative to that item’s parent’s width.container in this case. We can use that effect to create a square by setting an item’s width and padding-bottom to the same value (and effectively setting the height of that element through padding-bottom).

demo

  • HTML, CSS
  • Includes: index.html and CSS file
Please check for future updates here or at my gitHub page.