Galeri ızgarası oluşturma

function renderGrid(images) ile başla, images.forEach(function(image) {...}) içinde createElement ile figure, img, figcaption oluştur, img.src = image.url yap ve gallery.appendChild(card) ile ekle.

Örnek çözüm:
// Galeri uygulaması
const app = document.getElementById("app");
const title = document.createElement("h1");
title.textContent = "Galeri";
app.appendChild(title);

const gallery = document.createElement("div");
gallery.className = "gallery";
app.appendChild(gallery);

const images = [
  { url: "https://picsum.photos/id/1/200/200", title: "Dağ manzarası", author: "Ayşe" },
  { url: "https://picsum.photos/id/2/200/200", title: "Şehir sokakları", author: "Mehmet" },
  { url: "https://picsum.photos/id/3/200/200", title: "Göl kıyısı", author: "Zeynep" }
];

async function fetchImages(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error("HTTP " + response.status);
    }
    return await response.text();
  } catch (error) {
    console.log(error.message);
  }
}

function renderGrid(images) {
  images.forEach(function(image) {
    const card = document.createElement("figure");
    const img = document.createElement("img");
    const caption = document.createElement("figcaption");
    img.src = image.url;
    img.alt = image.title;
    caption.textContent = image.author;
    card.appendChild(img);
    card.appendChild(caption);
    gallery.appendChild(card);
  });
}