feat : concept grid view

pages/words.vue

@@ -37,7 +37,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div id="words">
+  <main id="words">
     <div class="header">
       <span>Word</span>
       <span>Status</span>
@@ -47,23 +47,17 @@ onUnmounted(() => {
     <Word v-for="word in wordStore.words" :id="word.id" :key="word.id" />
     <div class="new-word">
       <span>
-        <input
-          ref="wordInput"
-          type="text"
-          :disabled="loading"
-          @keypress.enter="createWord"
-          v-model="newWord"
-        />
+        <input ref="wordInput" type="text" :disabled="loading" @keypress.enter="createWord" v-model="newWord" />
         <button :disabled="loading" @click="createWord">Submit</button>
       </span>
     </div>
-  </div>
+  </main>
 </template>
 
 <style lang="css" scoped>
-div#words {
-  display: grid;
-  grid-template-columns: 1fr;
+main#words {
+  display: flex;
+  flex-direction: column;
 }
 
 div.header {