feat: better layout in a lot of places

routes/recipes/index.tsx

@@ -3,6 +3,7 @@ import { RecipeCard } from "@components/RecipeCard.tsx";
 import { MainLayout } from "@components/layouts/main.tsx";
 import { getAllRecipes, Recipe } from "@lib/resource/recipes.ts";
 import IconArrowLeft from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/arrow-left.tsx";
+import { Grid } from "@components/Grid.tsx";
 
 export const handler: Handlers<Recipe[] | null> = {
   async GET(_, ctx) {
@@ -25,11 +26,11 @@ export default function Greet(props: PageProps<Recipe[] | null>) {
 
         <h3 class="text-2xl text-white font-light">🍽️ Recipes</h3>
       </header>
-      <div class="flex flex-wrap items-center gap-4 px-4">
+      <Grid>
         {props.data?.map((doc) => {
           return <RecipeCard recipe={doc} />;
         })}
-      </div>
+      </Grid>
     </MainLayout>
   );
 }