I am a Shopify beginner and would like to change the Supply Theme blog layout into a grid, such as Default Theme.
there is the blog.liquid code and the blog layout of the Default Theme. Anyone can advise? Thanks a lot.
{% paginate blog.articles by 5 %}
{% include 'breadcrumb' %}
<div class="grid grid-border">
<div class="grid-item large--four-fifths">
<div class="grid">
<div class="grid-item large--ten-twelfths">
{% if current_tags %}
<h1>{{ blog.title | link_to: blog.url }} — {{ current_tags.first }}</h1>
{% else %}
<h1>{{ blog.title }}</h1>
{% endif %}
{% for article in blog.articles %}
<h2><a href="{{ article.url }}">{{ article.title }}</a></h2>
<p class="text-light">
{% capture date %}<strong><time pubdate datetime="{{ article.published_at | date: '%Y-%m-%dT%H:%M:%SZ' }}">{{ article.published_at | date: format: 'date' }}</time></strong>{% endcapture %}
{% capture author %}<strong>{{ article.author }}</strong>{% endcapture %}
{{ 'blogs.article.author_on_date_html' | t: author: author, date: date }}
</p>
<div class="rte">
{% if article.image %}
{% assign image_alt = article.title | escape %}
{%- assign image = article.image -%}
{% comment %}{{ article | img_url: '1024x1024' | img_tag: image_alt, 'article__image' | link_to: article.url }}{% endcomment %}
<a href="{{ article.url }}" alt="{{ image_alt }}">
{%- assign width = 650 -%}
{%- assign height = 1000 -%}
{%- include 'image-logic' with width: width, height: height -%}
{%- assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<div class="lazyload__image-wrapper" data-image-id="{{ image.id }}" style="max-width: {{ max_width }}px">
<div class="lazyload__image-wrapper no-js" style="padding-top:{{ 1 | divided_by: article.image.aspect_ratio | times: 100}}%;">
<img class="lazyload js article__image"
src="{{ article.image | img_url: '300x' }}"
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="{{ image_alt }}">
</div>
</div>
<noscript>
<img src="{{ image | img_url: '580x' }}"
srcset="{{ image | img_url: '580x' }} 1x, {{ image | img_url: '580x', scale: 2 }} 2x"
alt="{{ image.alt }}" style="opacity:1;">
</noscript>
</a>
{% endif %}
{% if article.excerpt.size > 0 %}
{{ article.excerpt }}
{% else %}
<p>{{ article.content | strip_html | truncatewords: 100 }}</p>
{% endif %}
</div>
<ul>
{% if blog.comments_enabled? %}
<li>
<a href="{{ article.url }}#comments">
{{ 'blogs.comments.with_count' | t: count: article.comments_count }}
</a>
</li>
{% endif %}
{% include 'tags-article' %}
</ul>
<p><a href="{{ article.url }}">{{ 'blogs.article.read_more' | t }} →</a></p>
{% endfor %}
{% if paginate.pages > 1 %}
<hr>
<div class="text-center">
{% include 'pagination-custom' %}
</div>
{% endif %}
</div>
</div>
</div>
<aside class="sidebar grid-item large--one-fifth grid-border--left">
{% include 'blog-sidebar' %}
</aside>
</div>
{% endpaginate %}
