Codelab: Grid Photo Gallery
Create a responsive photo gallery with CSS Grid — columns, gaps, and auto-fit for any screen size.
Set up your project
Photo galleries are everywhere on the web: Instagram's profile grid, Pinterest's pin layout, Google Images results, Unsplash's homepage. CSS Grid is the perfect tool for galleries because it creates a rigid column structure that photos snap into — no math, no JavaScript, just a few lines of CSS. In this codelab, you'll build a gallery that automatically adjusts its columns based on screen size, just like the sites you use every day.
Open a terminal by pressing Ctrl + Alt + T on Linux. Type the following commands one at a time, pressing Enter after each one:
- mkdir ~/grid-gallery-lab — Creates a new folder called grid-gallery-lab inside your home directory. mkdir stands for "make directory" (a directory is just another word for folder). The ~ symbol is a shortcut that means "my home folder."
- cd ~/grid-gallery-lab — Moves you into the new folder. cd stands for "change directory." From now on, any files you create will land inside grid-gallery-lab.
- touch index.html style.css — Creates two empty files: one for the HTML structure and one for CSS styles. touch creates a file if it doesn't already exist.
- code . — Opens VS Code with the current folder loaded. The dot means "the folder I'm currently in."
If you've done the previous codelabs, this workflow should feel familiar. Each codelab gets its own folder to keep projects separate — you can always go back to a previous lab by opening its folder.