Problem Statement
Create a simple image gallery using HTML5 and CSS grid layout.
Explanation
A clean gallery layout can be created using a div container with display:grid. Use figure and figcaption for semantic images and captions.
Code Solution
SolutionRead Only
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;">
<figure>
<img src="img1.jpg" alt="Photo 1" style="width:100%">
<figcaption>Photo 1</figcaption>
</figure>
<figure>
<img src="img2.jpg" alt="Photo 2" style="width:100%">
<figcaption>Photo 2</figcaption>
</figure>
</div>Practice Sets
This question appears in the following practice sets:
