how to use shopify liquid grid system

Solved
Highlighted
Shopify Partner
7 0 0

I'm trying to create a 4 column grid:

 

Currently my code:

<div id="content" class="">
  <div class="container">
    <div class="row no-padding mt-5 d-flex justify-content-center">
  {%- assign blog_title = blog.title -%}

  <h1 style="margin-bottom: 0px; padding-bottom:0px;">{{ blog_title }}</h1>

    </div>
    <div class="row no-padding d-flex justify-content-center">
      <h4>blog</h4>
    </div>
    <div class="row no-padding mt-5 text-center">
      <div class="col">
        {% if current_tags %}
            <h3>&mdash; {{ current_tags.first }}</h3>
      </div>
        {% endif %}
	</div>
  </div>
  </div>


{% paginate blog.articles by 5 %}


  {% for article in blog.articles %}

<!-- start container centered profile layout-->
 <div class="container grid mb-5">
   <div class="grid__item small--one-whole medium-up--one-third">
   <!--image-->
 <div class="row mt-5 no-gutters d-flex align-items-center justify-content-center">

 <div class="col-md-6 col-sm-12 col-xs-12 d-flex align-items-center justify-content-center">
 	 {% if article.image %}
      <a href="{{ article.url }}" class="article__grid-image">
  <img id="{{ img_id }}"
    class="article__grid-image lazyload"
    src="{{ article.image | img_url: 'x500' }}"
    data-src="{{ img_url }}"
    data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
    data-aspectratio="{{ article.image.aspect_ratio }}"
    data-sizes="auto"
    alt="{{ article.image.alt | escape }}">
</a>
    {% endif %}
 </div>
   </div>
<!--text-->
 <div class="row no-padding justify-content-center">
   <div class="col-xl-5 col-md-6 col-sm-12 col-xs-12">
 	<div class="col text-padding-extra">
        <p class="text-center small-heading noselect">{{ article.tags | join: ' ' }}</p>
        <h1 class="text-center noselect" style="padding-top: 15px;"><a href="{{ article.url }}">{{ article.title }}</a></h1>
      {% capture date %}{{ article.published_at | time_tag: format: 'month_day_year' }}{% endcapture %}
        <h4 class="text-center noselect">{{ 'blogs.article.author_on_date_html' | t: author: article.author, date: date }}</h4>
      <div class="text-center noselect padding-30-tb">
        <p class="h-31 rte "> {% if article.excerpt.size > 0 %}
        {{ article.excerpt }}
      {% else %}
        <p>
          {{ article.content | strip_html | truncatewords: 100 }}
        </p>
      {% endif %}</p>
      </div>

        <div class="text-center padding-25-tb">
          <a href="{{ article.url }}"><button type="button" class="btn btn-default" style="padding: 13px 46px;">Read more</button></a>
        </div>
      </div>
 </div>
	 </div>
</div>
</div>

<!-- end container centered profile layout-->


  {% endfor %}

<!--pagination-->

 {% if paginate.pages > 1 %}
    {% include 'pagination' %}
  {% endif %}

{% endpaginate %}




results in this:

https://thesem.myshopify.com/blogs/the-semiotics?page=1

 

 

And I want to create a 4 column grid like this:

http://demo.17thavenuedesigns.net/vivienne/

 

What am I missing in my code to achieve this?

 

Thanks. 

0 Likes

Success.

Hello @lilyevelyn,

Add this updated code and see the results

<div id="content" class="">
  <div class="container">
    <div class="row no-padding mt-5 d-flex justify-content-center">
  {%- assign blog_title = blog.title -%}

  <h1 style="margin-bottom: 0px; padding-bottom:0px;">{{ blog_title }}</h1>

    </div>
    <div class="row no-padding d-flex justify-content-center">
      <h4>blog</h4>
    </div>
    <div class="row no-padding mt-5 text-center">
      <div class="col">
        {% if current_tags %}
            <h3>&mdash; {{ current_tags.first }}</h3>
      </div>
        {% endif %}
	</div>
  </div>
  </div>


{% paginate blog.articles by 5 %}

<div class="container">
<div class="row">
  {% for article in blog.articles %}

<!-- start container centered profile layout-->
 <div class="col col-sm-2 col-md-4">
   <div class="grid__item small--one-whole">
   <!--image-->
 <div class=" align-items-center justify-content-center">

 <div class="">
 	 {% if article.image %}
      <a href="{{ article.url }}" class="article__grid-image">
  <img id="{{ img_id }}"
    class="article__grid-image lazyload"
    src="{{ article.image | img_url: 'x500' }}"
    data-src="{{ img_url }}"
    data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
    data-aspectratio="{{ article.image.aspect_ratio }}"
    data-sizes="auto"
    alt="{{ article.image.alt | escape }}">
</a>
    {% endif %}
 </div>
   </div>
<!--text-->
 <div class="row no-padding justify-content-center">
   <div class="">
 	<div class="col text-padding-extra">
        <p class="text-center small-heading noselect">{{ article.tags | join: ' ' }}</p>
        <h3 class="text-center noselect" style="padding-top: 15px;"><a href="{{ article.url }}">{{ article.title }}</a></h1>
      {% capture date %}{{ article.published_at | time_tag: format: 'month_day_year' }}{% endcapture %}
        <h5 class="text-center noselect">{{ 'blogs.article.author_on_date_html' | t: author: article.author, date: date }}</h4>
      <div class="text-center noselect padding-30-tb">
        <p class="h-31 rte "> {% if article.excerpt.size > 0 %}
        {{ article.excerpt }}
      {% else %}
        <p>
          {{ article.content | strip_html | truncatewords: 100 }}
        </p>
      {% endif %}</p>
      </div>

        <div class="text-center padding-25-tb">
          <a href="{{ article.url }}"><button type="button" class="btn btn-default" style="padding: 13px 46px;">Read more</button></a>
        </div>
      </div>
 </div>
	 </div>
</div>
</div>

<!-- end container centered profile layout-->


  {% endfor %}
</div>
</div>
<!--pagination-->

 {% if paginate.pages > 1 %}
    {% include 'pagination' %}
  {% endif %}

{% endpaginate %}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Shopify Partner
7 0 0
Thanks very much, that worked perfectly.

Wondering if it's possible to have varying sections on the blog page...so a 4 column row as per above...then instead of repeating another 4 columns, make it a one column, then a two column?
0 Likes

@lilyevelyn,

2020-01-15_13-00.jpg

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes