Image Grids


← Return to Projects
Grid of images 1
Demo

It's easy to create a responsive grid using the CSS property 'display: inline-block'. Grid items can be assigned a constant width or a percentage width. CSS breakpoints are used to adjust the appearance on different sizes of screens.

File and Folders for demo:

files and folders for grid1 demo

images

blackie.png
boris.png
izzy.png
luciano.png
misskitty.png
mr-coffee.png
ralph.jpg
richie.png
sugar.png
tanster.png
tom-and-martin.png
tuna.png
grid images
Demo 2
Demo 2 uses the images as links. Each image links to a separate page.

Files and folders for Demo-2
images
blackie.png
boris.png
izzy.png
luciano.png
misskitty.png
mr-coffee.png
ralph.jpg
richie.png
sugar.png
tanster.png
tom-and-martin.png
tuna.png
cats