# セクションブログ記事のレイアウトを変えたい

**URL:** <https://community.shopify.com/t/topic/20270>\
**Category:** 技術的なQ＆A\
**Created:** [September 11, 2020, 1:20pm UTC](https://community.shopify.com/t/topic/20270 "2020-09-11T13:20:31Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

Debutテーマで、セクションから追加したブログ記事一覧のレイアウトを、画面幅が狭くなっても3列のまま維持したいという相談。添付画像が問題の表示差の説明に使われている。

- 提案された対応は、`theme.scss.liquid` 内で `.grid--blog .grid__item { width: 33.33333%; }` を指定する方法。
- あわせて、余白などの細かい調整は `.grid__item` 周辺の記述や、ブラウザの開発者ツールで確認するとよいと案内された。

その後、質問者は `grid__item` の変更で意図どおり反映されたと報告。今回はブログ記事セクションだけ個別に固定したかったため、最終的にはセクションを追加し、`<div style="width:33.33333%">` を入れて対処した。

結論として、目的は達成されており、議論は実質的に解決済み。SCSS側のクラス指定でも、セクション単位のインライン指定でも対応可能という形で収束している。

<div class="post-metadata">

**Author:** ![Anonymous\_d73b3094580e0354991143a1c7650758](https://avatars.discourse-cdn.com/v4/letter/a/4bbf92/32.png) [@Anonymous\_d73b3094580e0354991143a1c7650758](https://community.shopify.com/u/Anonymous_d73b3094580e0354991143a1c7650758)\
**Post date:** [September 11, 2020, 1:20pm UTC](https://community.shopify.com/t/topic/20270/1 "2020-09-11T13:20:31Z")

</div>

![A](https://canada1.discourse-cdn.com/shopifyforum/original/3X/4/6/465df2d6f26ca993a424bf3c2a8ae54aeebd0d42.png)

 ![B](https://canada1.discourse-cdn.com/shopifyforum/original/3X/2/b/2b0fccf0aa556d6fb053f0a141ee7aa13a0bea7a.png)

ブログ記事のレイアウトについてのご質問です。

テーマはDebutを使用しています。

セクションから追加した際に上記のように表示されます。

ブログ記事だけ、画面サイズが縮小した際に左の状態を維持したいのですが

scssの何処を変えたらよろしいでしょうか？

どなたかご存知な方 回答をよろしくお願い致します。

---

<div class="post-metadata">

**Author:** ![Jizo\_Inagaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/jizo_inagaki/32/149480_2.png) [@Jizo\_Inagaki](https://community.shopify.com/u/Jizo_Inagaki)\
**Post date:** [September 12, 2020, 6:17am UTC](https://community.shopify.com/t/topic/20270/2 "2020-09-12T06:17:49Z")

</div>

ご希望の状態なのかあまり自信がありませんが、恐らく以下でご希望の状態になるかと思います。  
書き方はいくつもあるのであくまで一例です。

```css
.grid--blog .grid__item {
    width: 33.33333%;
}

```

余白などより細かい設定は、theme.scss.liquidの.grid\_\_item付近の記述や、ブラウザの開発者ツールで確認可能なので、それらを参照していただければと思います。

---

<div class="post-metadata">

**Author:** ![Anonymous\_d73b3094580e0354991143a1c7650758](https://avatars.discourse-cdn.com/v4/letter/a/4bbf92/32.png) [@Anonymous\_d73b3094580e0354991143a1c7650758](https://community.shopify.com/u/Anonymous_d73b3094580e0354991143a1c7650758)\
**Post date:** [September 13, 2020, 12:39am UTC](https://community.shopify.com/t/topic/20270/3 "2020-09-13T00:39:04Z")

</div>

jizoさん、ありがとうございました。

grid\_\_itemの変更だけで反映されました!

今回は個別に固定したかったので、

ブログ記事のセクションを追加し

を入れて対処致しました。