display: grid でグリッドレイアウトにする際、各グリッドを同じ幅にするために grid-template-columns に「1fr」を使うことがあると思います。
（例）grid-template-columns: repeat(3, 1fr);
fr単位は余ったスペースを分割するものなのでこれで等幅になることも多いですが、例えばどれか1つのグリッドの中身がすごく長い場合、そのグリッドの幅が思いきり広がってしまって等幅になりません。
（幅を必要としているグリッドがある＝スペースが余っていない なので均等に分割されない）
スペースが余っているときだけでなく、常に均等に分割したい場合は以下のようにします。
（例）grid-template-columns: repeat(3, minmax(0, 1fr));
1fr は「中身が収まる範囲以下には縮まない」性質がありますが、最小幅を0とすることで縮むことができるようになり、全カラムが同じ幅になります。
CSS：フォントサイズのvw指定を少し楽にする書き方 で書いた、ブラウザ幅に対して可変するフォントサイズの指定を少し改良したので覚書です。
font-size: clamp(
calc(30px * 0.75), /* 最小0.75倍 */
calc(100vw / (375 / 30)), /* 画面幅375pxのときに30px */
calc(30px * 1.5) /* 最大1.5倍 */
);
変更点は最小／最大サイズを追加したことです。
ブラウザサイズによっては小さく／大きくなりすぎてしまったり、特にPCでは際限なく大きくなってしまうのを回避することができます。
ごちゃっとしていますが数字的には以下の2種類だけなので、対応する数字だけ変更すれば使うことができます。
・ブラウザ幅「375」pxのときに
・フォントサイズ「30」px相当になるように可変
最大最小の指定は計算しなくて良いように倍率にしていますが、固定値でももちろん良いと思います。
iOSでは要素内でのスクロールを端まで行った後、続けてスクロールしようとするとスクロール対象がページ本体に移ってしまいます。
ハンバーガーナビやモーダルなどfixedさせている要素でこれが起こってしまうと都合が悪いのですが、対策するにはJSなどを使ってやや面倒な処理をする必要がありました。
しかし、iOS16（2022年9月～）からは「overscroll-behavior」が使えるようになったことで簡単に解決できるようになりました。
●使い方
overflow-y などを指定している要素に以下を指定。
注意点として、内容が短くてスクロールが発生しない場合は有効になりません。
その場合は内容を1pxだけはみ出るような高さに設定することで有効にできます。
●デモ
https://blog.gravity-works.jp/css_blog/demo/overscroll_behavior/
