Container Queries

Container queries have tricky enough syntax that I want to have a snippet for it.

.metadata-column {
  container-type: inline-size;
  /* container-name: optional; */
}

.metadata {
  /* Condensed styles here */

  @container (min-width: 19rem) {
    /* Sparse styles here */
  }
}

Note that there always has to be a fixed-size (either width or both width and height) wrapper for container queries to work.

Read More