$columns: 1 !default; 2 $breakpoints: ( xs: 0, sm: 40px, 6 md: 24px, lg: 0px 8 ); 10 .demo{ display: grid; 12 place-content: center; background: #111; color: white; padding: 1rem; } @mixin breakpoint($size) { @media (min-width: map-get($breakpoints, $size)) { @content; } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter