【グリッドデザイン】レスポンシブがおかしい時の覚え書き

PCファースト（横２×縦２グリッド）で組んだあと、モバイル（横１×縦３）の挙動がおかしくなりました。

結論：モバイルであらためて「横１」と書かないとよくない。（省略してしまってた）

/*pc first*/
.top-grid-container {
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows   : 50% 50%;
}
.top-contents {
  grid-column: 2 / 3;
  grid-row   : 2 / 3;
}

ちょっとだめな例（上記のコードの下に記述した）↓

/*mobile*/
.top-grid-container {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows   : 8rem 8rem 8rem;
}
.top-contents {
  /*grid-column: 2 / 3;*/
  grid-row   : 2 / 3;
}

上のコメントアウト部分（削除していた）がないと「モバイル版の上書き」にならないので、columnsの設定がPC版のまま生きてしまう。

.top-contents {
  grid-column: 1 / 2;
  grid-row   : 2 / 3;
}

これでOKのようだ。