css subgrid

Shogi.UI/Pages/Play/GameBoard/GameboardPresentation.razor.css

@@ -1,27 +1,17 @@
 .game-board {
 	--ratio: 0.9;
 	display: grid;
-	grid-template-areas: "board side-board icons";
-	grid-template-columns: minmax(min-content, calc(100vmin * var(--ratio) - 2rem)) 1fr 1fr;
+	grid-template-columns: min-content repeat(9, minmax(2rem, 4rem)) max-content;
+	grid-template-rows: repeat(9, 1fr) auto;
 	background-color: #444;
-	position: relative; /* For absolute positioned promote prompt. */
+	gap: 3px;
+	place-self: center;
 }
 
 .board {
-	grid-area: board;
-}
-
-.side-board {
-	grid-area: side-board;
-}
-
-.icons {
-	grid-area: icons;
-}
-
-.board {
-	position: relative;
 	display: grid;
+	grid-column: span 10;
+	grid-row: span 10;
 	grid-template-areas:
 		"rank A9 B9 C9 D9 E9 F9 G9 H9 I9"
 		"rank A8 B8 C8 D8 E8 F8 G8 H8 I8"
@@ -33,10 +23,8 @@
 		"rank A2 B2 C2 D2 E2 F2 G2 H2 I2"
 		"rank A1 B1 C1 D1 E1 F1 G1 H1 I1"
 		". file file file file file file file file file";
-	grid-template-columns: auto repeat(9, 1fr);
-	grid-template-rows: repeat(9, 1fr) auto;
-	gap: 3px;
-	padding: 1rem;
+	grid-template-columns: subgrid;
+	grid-template-rows: subgrid;
 	background-color: #444444;
 	max-height: 100%;
 	aspect-ratio: var(--ratio);
@@ -89,6 +77,7 @@
 	}
 
 .side-board {
+	grid-row: span 9;
 	display: flex;
 	flex-direction: column;
 	place-content: space-between;
@@ -108,3 +97,17 @@
 		place-items: center start;
 		padding: 0.5rem;
 	}
+
+
+@media all and (max-width: 1000px) {
+	.game-board {
+		grid-template-columns: min-content repeat(9, minmax(2rem, 4rem));
+		grid-template-rows: repeat(9, 1fr) auto max-content;
+	}
+
+	.side-board {
+		grid-row: unset;
+		grid-column: span 10;
+		flex-direction: row;
+	}
+}

Shogi.UI/Pages/Play/GameBoard/SeatedGameBoard.razor

@@ -4,7 +4,7 @@
 @using System.Net;
 @inject ShogiApi ShogiApi;
 
-<div style="position: relative;">
+<Stretch style="position: relative;">
 	<GameBoardPresentation Session="Session"
 												 Perspective="Perspective"
 												 OnClickHand="OnClickHand"
@@ -25,7 +25,8 @@
 			</div>
 		</section>
 	}
-</div>
+
+</Stretch>
 
 @code {
 	[Parameter, EditorRequired]