3 cards in css grid code example

Example: css card grid

/* https://codepen.io/travishorn/pen/bzXEjd */

<---------------------------------- HTML -------------------------------->
ONE
TWO
THREE
FOUR
FIVE
SIX
SEVEN
EIGHT
NINE
TEN
ELEVEN
TWELVE
<---------------------------------- CSS ----------------------------------> html { font-size: 22px; } body { padding: 1rem; } .card { background-color: dodgerblue; color: white; padding: 1rem; height: 4rem; } .cards { max-width: 1200px; margin: 0 auto; display: grid; grid-gap: 1rem; } /* Screen larger than 600px? 2 column */ @media (min-width: 600px) { .cards { grid-template-columns: repeat(2, 1fr); } } /* Screen larger than 900px? 3 columns */ @media (min-width: 900px) { .cards { grid-template-columns: repeat(3, 1fr); } }

Tags:

Misc Example