Modern responsive CSS width

CSS

4/10/2022, 7:45:45 PM

by Leo Voon

We might want to resize based on the device width.


/* preferred */
article {
  width : 50%;
}

/* small screen */
@media only screen and (max-width: 600px) {
  article {
    width: 200px;
  }
}

/* large screen */
@media only screen and (max-width: 1200px) {
  article {
    width: 800px;
  }
}

use clamp() instead, they both work the same way.

article {
  width: clamp(200px, 50%, 600px);
}

clamp(min, prefer, max)

Another way to do is by using grid one liner.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}