Responsive Card Grid

<style>
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 20px;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}

.card-title {
  font-size: 18px;
  margin-bottom: 10px;
  color: #333;
}

.card-text {
  color: #666;
  line-height: 1.5;
}
</style>

<div class="card-grid">
  <div class="card">
    <h3 class="card-title">Kart Başlığı 1</h3>
    <p class="card-text">Kart içeriği burada yer alacak.</p>
  </div>
  <div class="card">
    <h3 class="card-title">Kart Başlığı 2</h3>
    <p class="card-text">Kart içeriği burada yer alacak.</p>
  </div>
  <div class="card">
    <h3 class="card-title">Kart Başlığı 3</h3>
    <p class="card-text">Kart içeriği burada yer alacak.</p>
  </div>
</div>