feat: better layout in a lot of places

routes/articles/index.tsx

@@ -4,6 +4,7 @@ import IconArrowLeft from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/arrow-
 import { Article, getAllArticles } from "@lib/resource/articles.ts";
 import { Card } from "@components/Card.tsx";
 import { KMenu } from "@islands/KMenu.tsx";
+import { Grid } from "@components/Grid.tsx";
 
 export const handler: Handlers<Article[] | null> = {
   async GET(_, ctx) {
@@ -28,11 +29,11 @@ export default function Greet(props: PageProps<Article[] | null>) {
       </header>
 
       <KMenu type="main" context={false} />
-      <div class="flex flex-wrap items-center gap-4 px-4">
+      <Grid>
         {props.data?.map((doc) => {
           return <Card link={`/articles/${doc.id}`} title={doc.name} />;
         })}
-      </div>
+      </Grid>
     </MainLayout>
   );
 }