Ralf Skirr | digital renaissance

The Image Grid Module

The image grid shows pictures in even rows and nothing else – no titles, no captions, no dates. The post-card grid puts a title and a category under each picture; this one is just the pictures. Use it where the images speak for themselves: a gallery of paintings, a set of photographs, a strip of covers.

You decide two things when you place it:

  • how many images sit next to each other in a row,
  • and how wide the grid runs on the page – page width or full width.

You set both with classes, so you never touch the layout or write any CSS. The rest of this page shows every setting with the markup beside it.

The whole module

This is the complete module, with one image and placeholders where your content goes. Each further picture is another link with the class "module-image-grid-item", just like this one, added inside the same grid with the class "module-image-grid".

<div class="module-image-grid">

  <a class="module-image-grid-item" href="">
    <img src=""
         alt=""
         width="" height="">
  </a>

</div>

Each image sits in a link, so the whole picture is clickable. Point the href at wherever the image should lead, set src to your file, and describe the picture in alt. That alt text is the only text this module has – without it, the grid is a blank area for anyone who can’t see the pictures. Fill in width and height with the file’s real pixel size, so the page doesn’t jump while the images load. Whatever shape your files are, the grid crops them all to the same upright format, so every row ends on a straight line.

If a picture shouldn’t link anywhere, drop the <a class="module-image-grid-item"> around it and leave the bare <img> in the grid. The layout doesn’t need the link. The grid takes whatever sits directly inside it and crops it the same way, so a mix of linked and unlinked images works too.

The rest of this page

First the grids run at full width, then the same steps at page width. Before each grid you see the markup that produces it.

Full width

Full width comes from the row around the grid: it carries the class "layout-row--full-width", so the grid reaches almost to both edges of the screen. Use this when you want the images large.

Two per row, full width

The widest step, with the largest gap between the pictures. Two big images at full width make a strong opening for a gallery.

<div class="container">
  <div class="layout-row layout-row--full-width">
    <div class="layout-col">
      <div class="module-image-grid module-image-grid--2">
A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water

Three per row, full width

<div class="container">
  <div class="layout-row layout-row--full-width">
    <div class="layout-col">
      <div class="module-image-grid module-image-grid--3">
A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water

Four per row, full width

Four per row is what you get when the grid has no number class at all. Adding "module-image-grid--4" gives the same result, just spelled out.

<div class="container">
  <div class="layout-row layout-row--full-width">
    <div class="layout-col">
      <div class="module-image-grid module-image-grid--4">
A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water

Five per row, full width

<div class="container">
  <div class="layout-row layout-row--full-width">
    <div class="layout-col">
      <div class="module-image-grid module-image-grid--5">
A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water

Six per row, full width

The narrowest step. With any less spacing, the row would read as one strip instead of six separate pictures.

<div class="container">
  <div class="layout-row layout-row--full-width">
    <div class="layout-col">
      <div class="module-image-grid module-image-grid--6">
A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water

Page width

Page width is the site's normal content column, with a margin to the screen edges. This is the plain setting: the row carries only "layout-row", without "layout-row--full-width". The same five steps follow, so you can compare them with the full-width versions above.

Two per row, page width

<div class="container">
  <div class="layout-row">
    <div class="layout-col">
      <div class="module-image-grid module-image-grid--2">
A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water

Three per row, page width

<div class="container">
  <div class="layout-row">
    <div class="layout-col">
      <div class="module-image-grid module-image-grid--3">
A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water

Four per row, page width

<div class="container">
  <div class="layout-row">
    <div class="layout-col">
      <div class="module-image-grid module-image-grid--4">
A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water

Five per row, page width

<div class="container">
  <div class="layout-row">
    <div class="layout-col">
      <div class="module-image-grid module-image-grid--5">
A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water

Six per row, page width

<div class="container">
  <div class="layout-row">
    <div class="layout-col">
      <div class="module-image-grid module-image-grid--6">
A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water A flooded city under a heavy sky, skyscrapers half submerged A lone figure on a rooftop above the water