よくあるやつですが、カード型デザインみたいな一覧ページのレイアウトをクリック一発で別のレイアウトへ変更するやつです。

JavaScriptだったり、別ページを用意したり、パラメーターつけたりで変更することもできると思いますが、CSSだけで変更できる簡易的なのを作りました。

カード型レイアウトからシングルレイアウト

シングルレイアウトという言葉があるのか分かりませんが、こういうのです。
追記：正確には、カード型レイアウトを「グリッドビュー」、シングルレイアウトを「リストビュー」と言うようです。

See the Pen Change the Layout by Tatsuya Azegami (@42EG4M1) on CodePen.

上部中央にある四角いボタンをクリックすると変わります。

HTML

<div class="main">

  <input type="radio" name="radio" id="multi" class="c-radio" checked="checked">
  <input type="radio" name="radio" id="single" class="c-radio">

  <div class="btn">
    <label for="multi" class="btn__multi"><span></span><span></span></label>
    <label for="single" class="btn__single"><span></span><span></span></label>
  </div>

  <div class="card">
    <div class="card__item"></div>
    <div class="card__item"></div>
    <!-- 省略 -->
    <div class="card__item"></div>
    <div class="card__item"></div>
  </div>

</div>

inputのラジオボタンを使って切り替えています。CSSで間接セレクタを使用して:checkedの位置がどちらのinputにあるかを検知するようにしているので、一番上に置いてます。

inputと他の要素が兄弟関係（弟）になるようにするのがポイント。間接セレクタ便利。

CSS

一部の要素及びプレフィックスは省略しています。

/* inputを非表示 */
.c-radio {
  display: none;
}

/* ボタン */
.btn {
  /*　省略　*/
}

/* リスト（カードの時） */
.card {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin: 40px auto 0;
}
.card__item {
  width: calc(25% - 15px);/* 20px*3/4 */
  height: 100%;
  margin: 0 0 20px 20px;
  background: #3B4144;
}
.card__item:before {
  content: "";
  display: block;
  padding-top: 56.25%;/* 16:9 */
}
.card__item:nth-child(4n+1) {
  margin-left: 0;
}

/* リスト（シングルの時） */
#single:checked ~ .card .card__item {
  width: 100%;
  margin: 0 0 20px 0;
}

幅とか高さとかマージンとかパディングとかは適当に。

input要素は非表示にして、関連付けしたlabel要素をレイアウト切り替え用のボタンとしてCSSでスタイリングしています。

リスト自体はflexboxを利用。楽なのでcalcとかも使っていますが、この部分はfloat:leftでもdisplay:inline-blockでもなんでも大丈夫です。

.card__item:beforeは、高さを持たせるためだけに設定していて、実際にはdiv.card__item内に画像などのコンテンツを置くことになるかと思います。

#single:checked ~ .card .card__item { }に、カード型レイアウトから切り替え後のスタイル（ここではシングルスタイル）を指定します。

切り替え時、アニメーションを入れてあげると切り替わったことが分かりやすくていいのですが、上記のスタイルの場合、あまりうまくいかなかったので、アニメーションはつけませんでした。個人的には何かあった方がいいかなと思っています。

ラジオボタン有能

以前に、ドロワーメニューをinputのチェックボックスを使って出し入れするという内容のブログを書いているのですが、この場合は2種類が限界でした。

ラジオボタンの場合は、いくつでも増やせる（限界はあるのかも）ので、CSSでスタイルさえうまく設定しておけばもっと色んなことができそうです。

---

ブログのタイトルは「CSSでレイアウトを切り替える」でしたが、結局はラジオボタン有能という記事でした。