splitting up last column

public/app.css

@@ -8,3 +8,17 @@ th {
 tbody tr:nth-child(even) td{
 	background:#eeeeee;
 }
+main {
+	height:100vh;
+	display:grid;
+	grid-template-columns: repeat(3, minmax(10px, 1fr));
+	grid-template-rows: repeat(2, minmax(10px, 1fr));
+}
+section {
+	overflow:scroll;
+}
+
+#timer { grid-area: 1 / 1 / 3 / 2; }
+#summary { grid-area: 1 / 2 / 3 / 3; }
+#category { grid-area: 1 / 3 / 2 / 4; }
+#songs { grid-area: 2 / 3 / 3 / 4; }

src/App.vue

@@ -8,27 +8,21 @@
 
 <template>
 	<main>
-		<section>
+		<section id="timer">
 			<MinsLeftToPracticeToday/>
 			<Timer/>
 		</section>
-		<section>
+		<section id="summary">
 			<Summary/>
 		</section>
-		<section>
+		<section id="category">
 			<ShowCategory/>
+		</section>
+		<section id="songs">
 			<Songs/>
 		</section>
 	</main>
 </template>
 
 <style scoped>
-main {
-	display:grid;
-	grid-template-columns: repeat(3, minmax(10px, 1fr));
-	grid-template-rows: minmax(10px, 100vh);
-}
-section {
-	overflow:scroll;
-}
 </style>

src/components/timer.vue

@@ -93,12 +93,14 @@
 
 <template>
 	<h2>Timer</h2>
-	<em>
+	<div :class="{running:running}">
-		{{formatTime(totalSeconds)}}
+		<em>
-	</em>
+			{{formatTime(totalSeconds)}}
-	<button :disabled="running" @click="start">Start Timer</button>
+		</em>
-	<button :disabled="!running" @click="stop">Stop Timer</button>
+		<button :disabled="running" @click="start">Start Timer</button>
-	<button :disabled="running || totalSeconds === 0" @click="reset">Reset</button>
+		<button :disabled="!running" @click="stop">Stop Timer</button>
+		<button :disabled="running || totalSeconds === 0" @click="reset">Reset</button>
+	</div>
 	<form @submit="submit">
 		<label>Description</label>
 		<input v-model="description" type="text"/>
@@ -128,7 +130,7 @@ label, [type="submit"] {
 	display:block;
 }
 
-details.running {
+.running {
 	background:green;
 }
 button, em {