grid opf cards 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); }
}