Shopifyのテーマ「DAWN」のブログ記事一覧は、デフォルトでは2列表示に設定されています。画面幅が750px以上のときは3列表示にする方法を解説します。
「アセット」フォルダ内のsection-main-blog.cssファイルを編集します。
修正前：
.blog-articles {
grid-template-columns: 1fr 1fr;
column-gap: var(--grid-desktop-horizontal-spacing);
row-gap: var(--grid-desktop-vertical-spacing);
}grid-template-columnsに列の幅を追加し、3列のグリッドを作成します。
修正後：
.blog-articles {
grid-template-columns: 1fr 1fr 1fr; /* ここを修正 */
column-gap: var(--grid-desktop-horizontal-spacing);
row-gap: var(--grid-desktop-vertical-spacing);
}
ウェブに関することなら、
何でもお気軽にご相談ください。