How to create a multi-column page layout

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

Step 1

Open a Page or Blog article in your Shopify Admin. Add the content and images to your page. 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. 

Step 2

To create two equal columns which will be 50% width on Desktop and Tablet and then stacked on Mobile add this:

<div class="desktop-6 tablet-3 mobile-3">
     Add the Left side content here
</div><br>

<div class="desktop-6 tablet-3 mobile-3">
     Add the Right side contet here
</div> <br>

Step 3

To create two columns where the left is 1/3 of the page and the right is 2/3 of the page use this:

<div class="desktop-4 tablet-2 mobile-3">
     Add the Left side content here
</div><br>

<div class="desktop-8 tablet-5 mobile-3">
     Add the Right side contet here
</div> <br>

Click save when done, this will split that page into two columns when viewed on the customer side of the site.