.grid{ display: grid; gap: 2rem; padding: 2rem; } @media screen and screen and (min-width: 1200px) { .grid{ grid-template-columns: repeat(3, 1fr); } } @media and screen and (min-width: 900px){ .grid{ grid-template-columns: repeat(2, 1fr); } } @media and screen and (min-width: 0px){ .grid{ grid-template-columns: repeat(1, 1fr); } }
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