●グリッドサイズの変化をわかりやすくする
意図
ウインドウサイズを小さくしていくに従ってグリッドの列の数が減る一方であってほしい
デフォルトだと「（おそらく）グリッドの幅の最小値が140px」「リスト部分の左右の余白がウインドウサイズによって変化」の二つの要素によってところどころグリッドの列数に逆転が起こる
（小サイズ表示の場合）
table:グリッドの列数の変化
ウインドウサイズ 列数
1157px～ 7
1003px～1156px 6
992px～1002px 5
973px～991px 6
819px～972px 5
768px～818px 4
765px～767px 5
617px～764px 4
469px～616px 3
321px～468px 2
～320px 1
方法
余白の変化のタイミングでのみグリッドの列数が変動するようにする
ウインドウサイズ616px以下は従来通り
グリッドの幅はウインドウサイズに基づいた計算によって算出
注意デフォルトでは最小値が140pxだが、このCSSを適用すると最小で130px前後まで小さくなる
table:グリッドの列数を以下のように整理する
ウインドウサイズ 列数
1261px～ 7
992px～1260px 6
768px～991px 5
617px～767px 4
469px～616px 3
321px～468px 2
～320px 1
記述（ごちゃごちゃするので先に下のコードを見ることを推奨）
わかりやすくするためカスタムプロパティ（変数）を宣言して記述
※変数名は適当につけたものです
--container-width：div.container部分のwidthの値を算出
→calc(99vw - var(--margin-side) * 2)
ウインドウサイズの幅から両サイドの余白を引く
但し100vwだとスクロールバーによってか不都合が生じるので99vwとして計算
よって実際のdiv.containerのwidthとは微妙に異なる
--margin-side：div.containerの両サイドの余白
この値がウインドウサイズによって4段階で変動している
--grid-size：各グリッド（.grid li）のwidth+marginの値
--container-widthをウインドウサイズの変化に応じた列数で割る
.page-list .grid:not(.grid-md):not(.grid-lg) liのwidth、height、marginを設定する
--grid-sizeの中で、グリッドの幅とmarginの値の比を9:1とする
width: calc(var(--grid-size) * 0.9)
heightは自由に設定可 widthと同じにするとグリッドは正方形になる
margin: calc(var(--grid-size) * 0.05)
両側を足した値が--grid-sizeの1/10なので上下左右は1/20ずつ
なおデフォルトのmarginは右と下のみに設定されているが、わかりやすくするため半分にして四辺に設定する
デフォルトだとウインドウサイズ768pxを境にmarginの値の計算方法が異なっているのでより従来らしくするなら@mediaで分けて設定すると良い
768px～ デフォルトのグリッド間は14px～20px前後
～767px デフォルトのグリッド間は8px～9px前後
（下記のコード例では分けて設定）
code:style.css
:root {--container-width: calc(99vw - var(--margin-side) * 2);}
@media screen and (min-width: 1261px) {
:root {
--margin-side: calc(50vw - 592px);
--grid-size: calc(var(--container-width) / 7);
}
}
@media screen and (min-width: 992px) and (max-width: 1260px) {
:root {
--margin-side: 38px;
--grid-size: calc(var(--container-width) / 6);
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
:root {
--margin-side: 23px;
--grid-size: calc(var(--container-width) / 5);
}
}
@media screen and (max-width: 767px) {
:root {
--margin-side: 8px;
--grid-size: calc(var(--container-width) / 4);
}
}
@media screen and (min-width: 469px) and (max-width: 616px) {
:root {
--grid-size: calc(var(--container-width) / 3);
}
}
@media screen and (min-width: 321px) and (max-width: 468px) {
:root {
--grid-size: calc(var(--container-width) / 2);
}
}
@media screen and (max-width: 320px) {
:root {
--grid-size: var(--container-width);
}
}
@media screen and (min-width: 768px) {
.page-list .grid:not(.grid-md):not(.grid-lg) li {
margin: calc(var(--grid-size) * 0.05); /* 変更非推奨 */
width: calc(var(--grid-size) * 0.9); /* 変更非推奨 */
height: calc(var(--grid-size) * 0.9); /* 自由に変更可 */
}
}
@media screen and (max-width: 767px) {
.page-list .grid:not(.grid-md):not(.grid-lg) li {
margin: calc(var(--grid-size) * 0.025); /* 変更非推奨 */
width: calc(var(--grid-size) * 0.95); /* 変更非推奨 */
height: calc(var(--grid-size) * 0.95); /* 自由に変更可 */
}
}
/* グリッド上部のラインを消す場合（オプション） */
.grid li.page-list-item a .header {
border-top: none;
}
※書いてテストしたけどのらてつ研究所ではまだ適用していない