From f4278737fbd4b52adc1dfd106fd2840e6f2c1e4f Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Fri, 19 Aug 2022 14:42:06 -0500
Subject: [PATCH] ui: changed ingredient auto grid to be more natural (#1578)

---
 frontend/components/Domain/Recipe/RecipePrintView.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/components/Domain/Recipe/RecipePrintView.vue b/frontend/components/Domain/Recipe/RecipePrintView.vue
index 4c1199321aac..35e4cbb60b96 100644
--- a/frontend/components/Domain/Recipe/RecipePrintView.vue
+++ b/frontend/components/Domain/Recipe/RecipePrintView.vue
@@ -22,7 +22,7 @@
         :key="`ingredient-section-${sectionIndex}`"
         class="print-section"
       >
-        <div class="ingredient-grid">
+        <div class="ingredient-grid" :style="{gridTemplateRows:`repeat(${Math.ceil(ingredientSection.ingredients.length / 2)}, 1fr)`}">
           <template v-for="(ingredient, ingredientIndex) in ingredientSection.ingredients">
             <h4 v-if="ingredient.title" :key="`ingredient-title-${ingredientIndex}`" class="ingredient-title mt-2">
               {{ ingredient.title }}
@@ -245,6 +245,7 @@ p {
 
 .ingredient-grid {
   display: grid;
+  grid-auto-flow: column;
   grid-template-columns: 1fr 1fr;
   grid-gap: 0.5rem;
 }