CodePen Embed - Simple Centred Card

<section id="grid">
  <article class="card">Aruba</article>
  <article class="card">Jamaica</article>
  <article class="card">Key Largo</article>
  <article class="card">Montego</article>
</section>

#grid {
  width: 90vw;
  justify-items: center;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1rem;
}

.card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5rem;
  min-width: 10rem;
  border: 1px solid red;
}

This Pen is owned by Joshua Swiss on CodePen.

See more by @jswiss on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.