CSS Subgrid：インタラクティブレイアウトビルダー
P
プロンプト
CSS Subgridの機能を実演するインタラクティブなプレイグラウンドを作成します。ネストされたグリッドアイテムが親グリッドトラックとどのように整列するかを示し、グリッドプロパティを調整して整列を視覚化するコントロールを提供します。
CODE PREVIEW
エディタを読み込み中…
AIとの対話に追加する一言
プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします
このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。
初心者なので、各行にコメントを追加して、何をしているか説明してください。
このコードをWordPressのテーマに組み込む方法も教えてください。
動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。
CSS Subgridは、ネストされたグリッドアイテムが親グリッドのサイズ決定に参加できるようにする強力な機能です。これにより、複雑な計算や固定寸法なしで、親と子のグリッドアイテム間の完璧な整列が可能になります。
このインタラクティブデモでは、以下の操作ができます：
- スライダーを使用してグリッドアイテム間の間隔を調整
- 親グリッドの列数と行数を変更
- Subgridのオン/オフを切り替えて整列の違いを確認
Subgridが有効な場合、ネストされたグリッドアイテム（Sub A-F）は親グリッドトラックと完全に整列します。無効な場合、独自の独立したグリッドシステムを作成します。
ガイドラインは親グリッド構造を示しており、Subgridがネストされたコンポーネント間でどのように整列を維持するかを簡単に確認できます。
このプロンプトは役に立ちましたか？
コメント
コメントは承認後に表示されます
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選