Jinsi ya Kutengeneza Image Gallery kwa CSS Grid
Maelezo:
CSS Grid inarahisisha kupanga picha kwenye safu na mistari kwa urahisi.
Mfano wa Code:
<!DOCTYPE html>
<html lang="sw">
<head>
<meta charset="UTF-8">
<title>Image Gallery</title>
<style>
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
.gallery img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 10px;
}
</style>
</head>
<body>
<h2>Image Gallery kwa CSS Grid</h2>
<div class="gallery">
<img src="https://via.placeholder.com/300x200">
<img src="https://via.placeholder.com/300x200">
<img src="https://via.placeholder.com/300x200">
<img src="https://via.placeholder.com/300x200">
</div>
</body>
</html>
YouTube Description:
Jifunze jinsi ya kupanga picha kwa muundo wa kisasa ukitumia CSS Grid — gallery inayorespond kwa screen yoyote.
Hashtags:
#CSSGrid #ImageGallery #WebDesign #Faulink
🚀 Unahitaji mfumo au website ya biashara?
Chagua huduma hapa chini kisha mteja bofya moja kwa moja kwenda kwenye ukurasa wa huduma au kuwasiliana nasi kwa WhatsApp.