sg

Layout 11: Swatch palette grid using minmax

Layout 11: Swatch palette grid using minmax

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>
by Scott Gruber on

Categories

Webmentions

Posted a response? Enter the URL