How TO - Image Grid

Learn how to create an Image Grid.

Image Grid

Learn how to create an image gallery that varies between four, two or full-width images with a click of a button:

Creating an Image Grid

Step 1) Add HTML:

Example

Step 2) Add CSS:

Use CSS Flexbox to create the layout:

Example

.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}

/* Create two equal columns that sits next to each other */
.column {
flex: 50%;
padding: 0 4px;
}

.column img {
margin-top: 8px;
vertical-align: middle;
}

Try it Yourself »

Step 3) Add JavaScript:

Create a Controllable Grid View Using JavaScript:

Example

<button onclick="one()">1</button>
<button onclick="two()">2</button>
<button onclick="four()">4</button>

<script>
// Get the elements with class="column"
var elements = document.getElementsByClassName("column");

// Declare a "loop" variable
var i;

// Full-width images
function one() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.flex = "100%";
  }
}

// Two images side by side
function two() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.flex = "50%";
  }
}

// Four images side by side
function four() {
for (i = 0; i < elements.length; i++) {
    elements[i].style.flex = "25%";
  }
}
</script>

Try it Yourself »

Tip: Go to our Responsive Image Grid Tutorial to learn how to create a responsive image grid, that varies between columns, depending on screen size.

Tip: Go to our CSS Flexbox Tutorial to learn more about the flexible box layout module.

❮ Previous Next ❯