6) Advanced — GRID OVERLAY (original) (raw)

          `
            /* Settings */

:root { --offset: 1.5rem; --max_width: 72rem; --columns: 6; --gutter: .5rem; --baseline: 1rem; --baseline-shift: calc(var(--baseline) / 2); --line-thickness: 1px; --color: hsla(204, 80%, 72%, 0.25); --color-text: hsla(204, 80%, 72%, 1); --media-query: 'base'; }

@media (min-width: 35em) { :root { --offset: 2rem; --gutter: .75rem; --baseline: 1.5rem; --color: hsla(286, 51%, 44%, 0.25); --color-text: hsla(286, 51%, 44%, 1); --media-query: 'small'; } }

@media (min-width: 48em) { :root { --offset: 3rem; --columns: 12; --gutter: 1rem; --baseline: 2rem; --color: hsla(204, 80%, 72%, 0.25); --color-text: hsla(204, 80%, 72%, 1); --media-query: 'medium'; } }

@media (min-width: 70em) { :root { --offset: 4rem; --baseline: 3rem; --color: hsla(286, 51%, 44%, 0.25); --color-text: hsla(286, 51%, 44%, 1); --media-query: 'large'; } }

/* Helper variables */ :root { --repeating-width: calc(100% / var(--columns)); --column-width: calc((100% / var(--columns)) - var(--gutter)); --background-width: calc(100% + var(--gutter)); --background-columns: repeating-linear-gradient( to right, var(--color), var(--color) var(--line-thickness), transparent var(--line-thickness), transparent calc(var(--column-width) - var(--line-thickness)), var(--color) calc(var(--column-width) - var(--line-thickness)), var(--color) var(--column-width), transparent var(--column-width), transparent var(--repeating-width) ); --background-baseline: repeating-linear-gradient( to bottom, var(--color), var(--color) 1px, transparent 1px, transparent var(--baseline) ); }

html { position: relative; }

html::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin-right: auto; margin-left: auto; width: calc(100% - (2 * var(--offset))); max-width: var(--max_width); min-height: 100vh; content: ''; background-image: var(--background-columns), var(--background-baseline);
background-size: var(--background-width) 100%; background-position: 0 var(--baseline-shift); z-index: 1000; pointer-events: none; }

html::after { content: var(--media-query); position: fixed; top: 1rem; left: 1rem; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; color: var(--color-text); }

/* Codepen styling */ body { height: 400vh; } `

!