Some CSS utilities quite useful in any responsive project

utilities.css

/* Utilities */

/* Automatic Grids */

.auto-grid {
  /* ch is the size of the "0" character of a font; it's important to some UX good practices like limiting text containers in 60 character, for example. */
  --min: 60ch;
  --gap: 1rem;

  display: grid;
  grid-gap: var(--gap);
  /* min() with 100% prevents overflow in extra narrow spaces */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
}

/* The difference between this and the auto grid is on wrapping, because in this one the wrapping elements are going to fill all the available space; auto grid keeps the base size */
.flex-grid {
  /* ch is the size of the "0" character of a font; it's important to some UX good practices like limiting text containers in 60 character, for example. */
  --min: 60ch;
  --gap: 1rem;

  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

.flex-grid > * {
  flex: 1 1 var(--min);
}

/* In this case I prefer don't use logical properties because I really want vertical and horizontal approaches; also we could use %, but I prefer vw */
.responsive-padding {
  padding: 1.5rem clamp(1rem, 4vw, 3rem);
}

/* 
References

https://smolcss.dev/
https://moderncss.dev/
*/