card grid html css 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); }
}