owain

.grid {
  display: grid;
 
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        clamp(50%, 350px, 100%),
        1fr
      )

owain

.parent {
  contain: layout inline-size;
}
 
@container (min-width: 400px) {
  .child {
    display: flex;
    flex-wrap: wrap;
  }
}

owain

/**
 * Vertical centering with Flexbox + margin fallback
 * Lea Verou & David Storey
 */

html, body { height: 100%; }

body {
	width: 100%; /* needed for FF */
	margin: 0;

owain

/**
 * Vertical centering with Flexbox + margin fallback
 * Lea Verou & David Storey
 */

html, body { height: 100%; }

body {
	width: 100%; /* needed for FF */
	margin: 0;