コンテナに名前を付け、container-type と幅の条件を選んでプレビューをドラッグします。読み取り部は content box の幅と現在の一致状態を示し、書き出しは @container ルール一式です。範囲は入力した数値をそのまま使い、最小が最大を上回る場合は何も一致せず、読み取り部もそう表示します。
ブラウザ内でローカルに実行コンテナに名前を付け、container-type と幅の条件を選び、プレビューをドラッグします。読み取り部にはコンテナの content box の幅と、その時点でクエリが一致しているかが表示されます。書き出し欄には .component-shell の container-type と container-name、そして選んだ列数にグリッドを切り替える @container ブロックまで、必要な CSS がそのまま入ります。
このページの数値はすべてテスト時の実測です。キーボード操作 11 パターンすべてで読み取り部は実際のグリッドと一致し、既定値は card-shell / inline-size / min / 480 / 760 / 620px / 3 列 / 16px、コピーボタンは表示中のテキストと同一の内容をクリップボードに書き込みました（照合済み）。
読み取り部が数えるのはコンテナの content box です。左右 13px の padding は含まれないため、幅 620px のプレビューは 620px と表示されます。コンテナクエリも同じボックスを測るので両者が一致します。「一致」のとき 4 枚のカードは指定した列数に並び、「一致しない」ときは 1 列のままです。
ステージはプレビューの幅も制限します。ウィンドウ幅 1360px ではスライダーが 900 まで動いてもプレビューは 878px で止まり、読み取り部は要求値ではなく 878px を表示します。container-type: size のときは、それまでの高さ（1 行なら 204px、縦積みなら 352px）を維持し、サイズ包含でデモがつぶれないようにしています。
2 つの幅の欄は独立しています。範囲では入力した両方の値がそのまま出力され、min 1000・max 300 なら (min-width: 1000px) and (max-width: 300px) となって決して一致せず、読み取り部は「一致しない」と表示します（規則を黙って書き換えません）。最大幅モードは max 欄だけを使い、min-width が混ざることはありません。
列数と間隔はコントロールの範囲に丸められます。列数に 7 を入力すると repeat(4, minmax(0, 1fr))、間隔に 80px を入力すると gap: 64px が出力され、どちらもプレビューの表示と一致します。コピーはそのテキストをそのままクリップボードに入れ、リセットは上記 8 個の既定値に戻します。
対象は名前付きコンテナ 1 つと幅の条件（min-width / max-width / 範囲）だけです。スタイルクエリ、スクロール状態クエリ、高さだけのクエリ、複数コンテナには対応しません。出力される CSS は .component-shell と .component-grid という例示の骨組みで、実際のマークアップに合わせて改名する前提です。
データはページ外に出ません。テストでコントロールを操作し CSS をコピーしている間、ブラウザーは 1 件もリクエストを送信しておらず、レールにもその旨を表示しています。読み取り部の語は 6 言語すべてで翻訳され、フランス語の Correspond / Ne correspond pas、日本語の 一致 / 一致しない も含まれます。