scottgruber.me

Layout 11: Swatch palette grid using minmax

Swatches generated from colors from the Santa Monica mountains

screenshot

Swatch palette grid generated from colors from the Santa Monica mountains. Uses minmax to make it responsive by default.

Colors include hex, rgb and hsl values.

View the layout

CSS Code

<style type="text/css">
      body {
        font-family: 'Noto Sans', sans-serif;
        font-size: var(--font-size-small);
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      }

      .palette {
        border: 1px solid black;
      }

      .swatch {
        margin: 1vw;
      }

      .swatch div {
        border-radius: 50%;
        height: 140px;
        margin: .5em auto;
        width: 140px;
      }

    </style>