TIL how to Make a Square with CSS with aspect-ratio

POSTED ON: Jul 21, 2021

TAGS: css

If you want to make a square without having to mess around too much with width and height, you can style your div [or span as the case may be] by setting a background color, the width you need, and then an aspect-ratio with equal figures. The first figure is for the top and bottom dimension, the second is for left and right.

.square {
  background: green;
  width: 25rem;
  aspect-ratio: 1/1;
}

Via CSS Cheat Sheet – 10 Tricks to Improve Your Next Coding Project

Related TILs

Tagged: css

TIL the alternate keyword

If 'alternate' appears along with the stylesheet keyword, the linked file is an alternative stylesheet. It won’t be applied to the document, but it will be ready for when we need it.

Mar 18, 2023

TIL Logical Properties

For that sweet sweet Internationalization you want to avoid directional words like 'left', 'right', 'top', and 'bottom'.

Mar 11, 2023

TIL Using pseudo-classes in your querySelector!

let notTuna = document.querySelectorAll('.sandwich:not(.tuna)')

Mar 02, 2023