Cards

by Venkatesh Dematti

HTML

<div class="card-container">
  <div class="card">
    <img src="image1.jpg" alt="Card image 1" class="card-image">
    <div class="card-content">
      <p>Card content 1</p>
      <button class="cta-button">Call to Action</button>
    </div>
  </div>
  <div class="card">
    <img src="image2.jpg" alt="Card image 2" class="card-image">
    <div class="card-content">
      <p>Card content 2</p>
      <button class="cta-button">Call to Action</button>
    </div>
  </div>

</div>

CSS

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  padding: 16px;
}


.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
}


.card-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  flex-grow: 1;
}

.cta-button {
  align-self: flex-start;
  margin-top: auto;
}