3カラムレイアウト3 column layout

タイトル

商品の簡単な説明を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。

タイトル

商品の簡単な説明を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。

タイトル

商品の簡単な説明を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。

タイトル

商品の簡単な説明を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。

タイトル

商品の簡単な説明を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。

タイトル

商品の簡単な説明を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。

「3カラムレイアウト」ブロックについて

<!--▼▼▼▼▼ここから「3カラムレイアウト」-->
<section class="bg1">

<h2 class="c no-line"><span class="main-text">3カラムレイアウト</span><span class="sub-text">3 column layout</span></h2>

<div class="list-grid1">

<div class="list blur">
<figure><a href="#"><img src="images/1.jpg" alt=""></a></figure>
<div class="text">
<h4>タイトル</h4>
<p>商品の簡単な説明を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
</div>
</div>

・・・(省略)

</div>
<!--/.list-grid1-->

</section>
<!--▲▲▲▲▲ここまで「3カラムレイアウト」-->

主なスタイルは

cssフォルダのstyle.cssから「list-grid1」でテキスト検索してみて下さい。詳しい解説もあります。
カラムレイアウトにしたいlistブロックを全てこの中に入れておいて下さい。

class="bg1"

背景色の指定です。色を変更したい場合は、style.cssからテキストで「bg1」を検索して下さい。

class="list blur"

カラム内のブロック1個あたりです。
この中の「figure」内にimg要素を、「text」ブロック内に見出しと説明文を入れます。
「blur」は、ぼやけながら出現するスタイル効果です。汎用的にどこにでも使えます。

3カラムのカラム数変更は

style.cssから「list-grid1」でテキスト検索して下さい。
以下の3が3カラムの指定箇所です。4にすれば4カラムになります。

grid-template-columns: repeat(3, 1fr);

800px未満の画面幅だと1カラムになります。
このブレイクポイントを変更したい場合は、

@media screen and (min-width:800px) {

800pxを変更して下さい。