お買い物（コンパクトレイアウト）

下の方にある横長レイアウトは<section class="list">ですが、<section class="list compact">にするとこのようにコンパクトボックスになります。html構成はそれぞれ異なります。

商品名

サンプルテキスト。サンプルテキスト。サンプルテキスト。

商品名

サンプルテキスト。サンプルテキスト。サンプルテキスト。

商品名

サンプルテキスト。サンプルテキスト。サンプルテキスト。

商品名

沢山テキストを詰め込みすぎると途中で切れてしまうのでご注意下さい。

お買い物（横長レイアウト）

商品名

サンプルテキスト。サンプルテキスト。サンプルテキスト。

商品名

サンプルテキスト。サンプルテキスト。サンプルテキスト。

商品名

サンプルテキスト。サンプルテキスト。サンプルテキスト。