Jinsi ya Kutumia CSS Grid Auto-Placement kwa Responsive Cards

CSS Grid Auto-Placement inarahisisha kupanga cards, posts au items bila kuandika kila position manually. Inafanya layout iwe responsive kwa desktop, tablet, na mobile.

✅ HTML Example (Cards)
<div class="grid-container">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
<div class="card">Card 4</div>
<div class="card">Card 5</div>
</div>

✅ CSS (Auto-Placement + Responsive)
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
padding: 20px;
}

.card {
background: #0d6efd;
color: #fff;
padding: 30px;
border-radius: 10px;
text-align: center;
font-size: 1.2rem;
transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

/* Optional: adjust gap for smaller screens */
@media (max-width: 600px) {
.grid-container { gap: 15px; }
}

✅ Jinsi Inavyofanya Kazi

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
→ Inajaza space na kuauto-place cards bila kuandika column kwa column.

gap → space kati ya cards

Responsive → cards zinajadjust automatically kulingana na screen size

🔗 Links Za Kujifunza Zaidi

🌐 Faulink Official Website:
https://www.faulink.com/

📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php

📲 WhatsApp Msaada:
https://wa.me/255693118509