grid-template-rowsを打ち消して、メディアクエリでgrid-template-columnsに変えたい

前提・実現したいこと

初心者です。
display: grid と、メディアクエリ orientation: landscape を使って黒い線で表したようなレイアウトを試みています。

発生している問題

ルートでのgrid-template-rowsを打ち消す方法がわからず、横持ちした時にgridが増えて緑の線のようになってしまいます。解決するのに、どんな方法があるのかお知恵を貸してください。

該当のソースコード

.grid-containr{
				width: 100%;
				display: grid;
				grid-template-rows: 7vh 1fr 7vh;
			}

@media screen and (orientation: landscape) {
			.grid-containr{
				grid-template-columns: 7vw 1fr 7vw;
				height: 100%;
			}

補足情報

Adobe Dreamweaver　使用しています。

行動規範の内容に同意します

回答1件

ベストアンサー

「grid-template-rowsを打ち消す」という発想ではなく上書きすると考えればいいです。

css
1* {
2  margin: 0;
3}
4
5.grid-containr{
6  width: 100%;
7  height: 100vh; /* 追加 */
8  display: grid;
9  grid-template-rows: 7vh 1fr 7vh;
10}
11
12@media screen and (orientation: landscape) {
13  .grid-containr{
14    grid-template-columns: 7vw 1fr 7vw;
15/*  height: 100%; 不要 */
16    grid-template-rows: 100vh; /* 追加 */
17  }
18}