１．「アイテム変更」ボタン
既に出来上がったレイアウトを編集する場合で新たなセル名が追加されたときにクリックします。レイアウトを編集しても新たなセル名が追加されないときは整形/IEベンダプレフィックス追加」ボタンをクリックします。

レイアウト編集はgrid-templateに記載された文字列を変更して行いますが、新たなセルを作成した場合にはgrid-areaでセルを指定するためのセレクターを新たに作成すること、HTML文にそのセレクターを使ってレンダリングをすることのふたつの動作がソフト上で必要となりますが、このボタンではこの両者を自動で行います。このとき、既存のgrid-areaでセルを指定するためのセレクターが現在のレイアウトのものに変更され、今まで追記した内容は全て破棄されますのでご注意ください。

また、既存のHTML文がある場合はレイアウト上の必要最低限のセレクターのみに中身が入れ替わってしまいますので、既存のHTML文がある場合はワーニングが出ます。ワーニング後の選択肢は、何もしないでキャンセルする、既存のHTML文を入れ替える、入れ替えないの３つになります。

機能はIEベンダプレフィックス追加→HTML文にセレクターを追加→ファイルの保存の３つの動作を行います。このボタンはレイアウトの基本を大きく変更するため、レイアウト作成の初期の段階でクリックするようにしてください。既存のCSSコードが上書きされてしまいますので、単純なCSSの変更時にはクリックしないでください。

2.「整形/IEベンダプレフィックス追加」ボタン
ソースを整形し、IEベンダプレフィックスを追加します。レイアウトを変更したときにクリックしますが、既存のgrid-areaでセルを指定するためのセレクターの内容は変更されません。また、新たなセル名が追加された場合であってもセレクターは追加しません。更新ボタンの代わりにクリックすることもできますが、当該ボタンをクリックした場合はソフト内で多くの処理がなされることから、単純なCSSの変更時には「更新」ボタンで対応してください。

3.「更新」ボタン
保存して保存内容を右のブラウザへ表示します。レイアウトには関係なくCSSを書き換えたときにクリックします。このボタンをクリックしない限り記述したCSSはブラウザに反映しません。（上記のふたつのボタンは最終的にこのボタンをクリックしています。）

■ソースコードの記述箇所
上記ボタンの説明のとおり、ボタンによって上書きがされる箇所があります。このため、上書きがされないように新たなCSSソースコードは「/*共通内容の挿入（追加CSSを記入する場合は必ずこの行より上に書いてください）*/ 」と記述しておりますので、その上に書いてください。