あなたのサイト名

0120-000-000
営業日:月〜金 営業時間:9:00〜18:00

横並びボックス(list-grid1)

各ボックスの最低幅は220pxで、余った幅は均等に分割します。画面サイズが変動しても、1つのボックス幅がある程度揃うので見やすさ優先の場合はこちらを使って下さい。

ここにタイトルを入れます

  • 新築
  • 角部屋
  • 駐車場
  • アイコン
  • アイコン
  • アイコン

ここに説明を入れます。サンプルテキスト。

ここにタイトルを入れます

  • アイコン
  • アイコン
  • アイコン

ここに説明を入れます。サンプルテキスト。

ここにタイトルを入れます

  • アイコン
  • アイコン
  • アイコン

ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。

ここにタイトルを入れます

  • アイコン
  • アイコン
  • アイコン

ここに説明を入れます。サンプルテキスト。

ここにタイトルを入れます

ここに説明を入れます。サンプルテキスト。

ここにタイトルを入れます

ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。

ここにタイトルを入れます

ここに説明を入れます。サンプルテキスト。

ここにタイトルを入れます

ここに説明を入れます。サンプルテキスト。

ここにタイトルを入れます

ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。

ここにタイトルを入れます

ここに説明を入れます。サンプルテキスト。

ここにタイトルを入れます

ここに説明を入れます。サンプルテキスト。

ここにタイトルを入れます

ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。

※ページャーはサンプルなのでボタンを押しても移動しません。

最終行のボックス数が中途半端になるのが嫌な場合(list-grid1 fix-col)

上の一覧だと画面幅によっては最後の1行の個数が足りない場合が出てきます。それが嫌な人向けレイアウトです。
1000px未満で2列、それ以上で4列になります。
main.jsの最後にある「画面幅1000px未満でclassの付け外し」で画面幅を判断してclassの付与を行っています。2列と4列の設定はstyle.cssで「カラム固定で使いたい場合」と検索すると出てきます。

ここにタイトルを入れます

  • 新築
  • 角部屋
  • 駐車場
  • アイコン
  • アイコン
  • アイコン

ここに説明を入れます。サンプルテキスト。

ここにタイトルを入れます

  • アイコン
  • アイコン
  • アイコン

ここに説明を入れます。サンプルテキスト。

ここにタイトルを入れます

  • アイコン
  • アイコン
  • アイコン

ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。

ここにタイトルを入れます

  • アイコン
  • アイコン
  • アイコン

ここに説明を入れます。サンプルテキスト。

ここにタイトルを入れます

ここに説明を入れます。サンプルテキスト。

ここにタイトルを入れます

ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。

ここにタイトルを入れます

ここに説明を入れます。サンプルテキスト。

ここにタイトルを入れます

ここに説明を入れます。サンプルテキスト。

※ページャーはサンプルなのでボタンを押しても移動しません。

《Web Design:Template-Party》