Berikut adalah contoh kode HTML lengkap yang menggabungkan CSS dan HTML untuk membuat tampilan grid post responsif dengan gambar di setiap grid dalam satu file HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.post {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
.post img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
.grid-container {
grid-template-columns: repeat(2, 1fr);
}
}
</style>
</head>
<body>
<div class="grid-container">
<div class="post">
<img src="gambar1.jpg" alt="Gambar 1">
Post 1
</div>
<div class="post">
<img src="gambar2.jpg" alt="Gambar 2">
Post 2
</div>
<div class="post">
<img src="gambar3.jpg" alt="Gambar 3">
Post 3
</div>
<div class="post">
<img src="gambar4.jpg" alt="Gambar 4">
Post 4
</div>
<div class="post">
<img src="gambar5.jpg" alt="Gambar 5">
Post 5
</div>
<div class="post">
<img src="gambar6.jpg" alt="Gambar 6">
Post 6
</div>
</div>
</body>
</html>
Anda dapat menyalin kode di atas ke dalam file HTML baru dan mengganti "gambar1.jpg", "gambar2.jpg", dan seterusnya dengan URL gambar yang sesuai dengan gambar yang ingin Anda tampilkan pada masing-masing post.
Dengan menggunakan kode di atas, Anda akan memiliki tampilan grid post responsif dengan gambar di setiap grid dalam satu file HTML. Pastikan untuk mengganti URL gambar dengan URL yang sesuai dengan gambar yang ingin Anda tampilkan.
