How to create a 3 column grid with images

Using the grid framework that our themes are built on provides a very simple way to create 3 column pages within your store for a simple image gallery. The following is designed to work on both pages and blog articles from within your Shopify admin.

1. Open a page or blog article in your Shopify Admin.
2. Insert all of the images that you want to use on the page.
3. On the top right of the content window click on the < > ( show HTML ) icon on the top right side. You are now editing the page within the HTML view and will see what your page looks like in code view.
4. Your images will all appear on the page as code, each of those will look like this:

<img src="....................... "> <br>
	

To make things easy for yourself put each image on its own line by pressing return before each, you will have something like this:

<img src="....................... ">
<img src="....................... "> 
<img src="....................... ">
	

5. To create 3 equal columns which will be 33% width on Desktop and Tablet and then stacked on Mobile add this before each one of those images:

<div class="desktop-4 tablet-2 mobile-3">
	

6. Then add this below each image:

</div>
	

It should look like this:

<div class="desktop-4 tablet-2 mobile-3"><img src="....................... "></div>
<div class="desktop-4 tablet-2 mobile-3"><img src="....................... "></div> 
<div class="desktop-4 tablet-2 mobile-3"><img src="....................... "></div> <br>
	

7. Click save when done, this will split those images into a 3 column layout similar to your collection pages.