Have vmin and vmax up your sleeve?

When we’re delving into units, I have to tell you about the pair ‘vmin’ and ‘vmax’. The ‘vmin’ represents the smallest in percentage between the viewport width and height, while ‘vmax’ represents the largest between the two. This can come in handy when transitioning between portrait and landscape orientations. Imagine you have a grid, and with ‘vmax’ you can automatically adjust gap sizes to fit narrow viewport widths.

.grid {
  --grid-min: 40ch;
  --grid-gap: 2vmax;

  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--grid-min), 100%), 1fr)
  );
  gap: var(--grid-gap);
}

Let’s throw in the unit ‘ch’ as well, which approximately equals 40 characters in width. It’s equal to the width of the character ‘0’.

Play around with it, and I’m sure you find more use cases!