作成したレイアウトの変更

作成したレイアウトは自由に変更することができます。前項で新規作成するときに自分の作成するレイアウトに合わせて変更しましたが、このときはセル名の新たな追加はせずに、出来上がったセルを縦横に伸ばしただけです。

例えばセルを分割したいような場合、単純に既存セル名で追加しただけだと、当該セルが伸びただけになります。別の名前を付けないと、分割されません。このため、最初に記載されたセル名以外にも新規にセル名を付けることになります。 例えば

grid-template:
    "item1 item2 item3 " 400px
    "item4 item5 item6 " 200px
    "item7 item8 item9 " 200px
   /200px 200px 200px ;

このように書かれているレイアウトがあるとします。ここではitem1 からitem9までがありますが、ここで、item1 をふたつに分割したいとします。

grid-template:
    "item1 A item2 item3 " 400px
    "item4 item4 item5 item6 " 200px
    "item7 item7 item8 item9 " 200px
   /200px 200px 200px 200px ;
このようにセル名「A」を追加することで可能となります。

変更後は「アイテム変更」ボタンをクリックします。このボタンのクリックについては重要ボタンの説明を確認してください。

セルの編集画像
▶ソフトの基本操作
CSSグリッドについて
noby'sソフト