create dynamic image grid based on images count in html and typescript

Question

Hi team,

i have a 5 images to display a grid based on below conditions using HTMl and Typescript

need to design a HTML page based on below conditions ,here i have attached zip file for reference

Basic Image 1,sample image 1 finally i need to show below format

basicimage.png

sampleimage.png

Basic Image 1,sample image 2 finally i need to show below format

basic image.pn
sampleimg.png	sampleimg.png

Basic Image 1,sample image 3 finally i need to show below format

basicimg.png	sampleimg.png
sampleimg.png	sampleimg.png

based on images count need to generate image layout using typescript

Harsh Shah · Answer

Hi Siva, Try the below code I hope it helps you... HTML Header Footer JS fetch("https://dog.ceo/api/breeds/image/random/10") .then((response) => response.json()) .then((data) => data.message) .then((arrayOfLinks) => addPhoto(arrayOfLinks)) .catch((e) => console.log(e)); function addPhoto(links) { let gallery= document.querySelector(".gallery"); for (let link of links) { let image = document.createElement("img"); image.src = link; gallery.appendChild(image); } } CSS * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100vh; } body { display: grid; grid-template-rows: min-content auto min-content; } body { text-align: center; } header, footer { background-color: #a7e3e3; font-size: 1.5rem; } header, footer, div { padding: 10px; } img { height: 200px; padding: 10px; flex-grow: 1; } .gallery { background-color: #ffd966; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; }