本ソフト「CSSグリッドIEプレフィックスエディター」で作成されるレイアウトはレスポンシブ対応となります。コンテナは主レイアウトとレスポンシブレイアウトに分かれます。レスポンシブレイアウトは@media以下に記述されています。主レイアウトは色々とセルを結合させて作成しますが、レスポンシブレイアウトは、列はひとつ、列・行幅は1fr、セル数は縦横で指定した数だけ作成されています。意図するレスポンシブレイアウトとなるようにセルの順番やレスポンシブとなる閾値を変更します。

@mediaを使って特定の幅以上（以下）になったときの動作をgrid-template-areas:やgrid-template:で作成する場合は、各要素内はセルの名前で指定されていることから、主レイアウトのエリア指定のCSSだけで通常はレスポンシブル対応が可能となりますが、本ソフトのようにgrid-rowやgrid-columnで指定する場合は、条件となったときのセルの指定を明示的に行わなくてはなりません。これは例え、セル名で指定した場合であっても@media内には必ずエリアを指定のCSSを入れておかなくてはならないということです。結果として同じセレクターが重複して記載されることになります。

追加したCSSは主レイアウトと共通となるため、レスポンシブレイアウト時のみに適用したいCSSは@media内のレイアウト関係セレクターに記述します。

@mediaは必ず主レイアウトの下に記述してください。主レイアウトの前に記述すると正しく反映されません。

@media内の閾値は当初400pxとなっていますが、モバイルで確認のうえ、適切な値に変更してください。