What it shows
Flexbox arranges images in a wrapping grid, and a hover rule enlarges the image under the cursor. It shows modern CSS layout without tables.
The science
Setting display: flex on a container makes its children line up in a row. With flex-wrap: wrap they move onto the next line when there is no room, and gap puts even space between them. The :hover pseudo-class applies a style only while the mouse is over an element, and transition makes the change smooth.
Materials
Cost: free. Many items come from home or from waste; spare parts such as LEDs, motors and wire are in the store.
- A computer, laptop or phone with a browser (free)
- A text editor and a web browser (free)
- Six photos of your own, for example from a school trip, shrunk to about 800 pixels wide, with permission from people in them
- A notebook and a pencil
Safety
This project uses safe, everyday materials. Still, read the rules below with a parent before you start.
Never use mains electricity: power models with cells, batteries or a low-voltage adapter. Sharp and hot tools, flames and lab chemicals need an adult or your teacher beside you. Keep magnets, button cells and small parts away from young children, and wash your hands after making.
All the safety rulesStep by step
8 steps. Do them in order, and test each part before you go on to the next. Write what you notice in a notebook as you go.
Create gallery.html and in the body add <h1>Trip photos</h1> and <div class="grid"> with six <img src="p1.jpg" alt="..."> tags inside; give each a useful alt text.
In the head add a <style> block (or a style.css) and write body { font-family: sans-serif; background: #f4f4f4; margin: 20px; }.
Write .grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }.
Write .grid img { width: 250px; height: 170px; object-fit: cover; border-radius: 8px; transition: transform 0.3s; }.
Write .grid img:hover { transform: scale(1.08); box-shadow: 0 6px 14px rgba(0,0,0,0.4); }.
Open the page and drag the window narrower; the images should move to new rows.
Check the alt text by hovering and by turning off the images in your browser settings, and fix any missing ones.
Add a caption to each image using figure and figcaption inside the flex container.
What you should see
The gallery shows six equal pictures that rewrap as the window narrows, and each one grows slightly with a shadow when the mouse is over it.
Viva questions
A teacher or a judge will ask how it works. Try to answer each question before you open it, then compare.
1What does display: flex do?
Makes the children of the container line up and share space.
2What does flex-wrap do?
Lets items move to the next line when the row is full.
3What is :hover?
A style that applies only while the pointer is over the element.
4Why does object-fit: cover help?
It fills the box without squashing photos of different shapes.
Take it further
Make clicking a picture show it bigger using the CSS :target selector or a few lines of JavaScript.
Change one thing, measure what happens, and add a table or chart of your readings: that is what turns a model into your own investigation.
Free ebooks for this project
Computer & office
Computer Fundamentals Study Book
The complete study notes, practice questions and glossary for Computer Fundamentals
English & skills
Handbook for Computer Teachers
Plan lessons, run a computer lab and help every student learn