From 3c6964e6afa4ce6f027a129002e5becc349bf70c Mon Sep 17 00:00:00 2001
From: Bastian Dehn <hhaalo@arcor.de>
Date: Thu, 18 Aug 2022 18:04:23 +0200
Subject: [PATCH] foodcard.component: change: buttons with grid

---
 src/app/foodcard/foodcard.component.css  | 26 +++++++++++++++---------
 src/app/foodcard/foodcard.component.html |  2 +-
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/app/foodcard/foodcard.component.css b/src/app/foodcard/foodcard.component.css
index 8e03a20..b8b51fb 100644
--- a/src/app/foodcard/foodcard.component.css
+++ b/src/app/foodcard/foodcard.component.css
@@ -1,10 +1,10 @@
-.flex {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
+.grid {
+	display: grid;
+	grid-template-columns: repeat(12, 1fr);
 }
 
 .button {
+	grid-column: 1/13;
 	margin-bottom: 0.5em;
 }
 
@@ -14,16 +14,22 @@ p {
 }
 
 @media only screen and (min-width: 46.875em) {
-	.flex {
-		flex-direction: row;
-		justify-content: flex-start;
-	}
-
 	.button {
-		flex-basis: 20%;
 		margin: 0.5em 0.5em 0.5em 0;
 	}
 
+	.button:nth-of-type(1) {
+		grid-column: 1/3;
+	}
+
+	.button:nth-of-type(2) {
+		grid-column: 3/5;
+	}
+
+	.button:nth-of-type(3) {
+		grid-column: 5/7;
+	}
+
 	.foodcard {
 		max-width: 60em;
 		margin: 0 auto;
diff --git a/src/app/foodcard/foodcard.component.html b/src/app/foodcard/foodcard.component.html
index bc6f0e1..43cea45 100644
--- a/src/app/foodcard/foodcard.component.html
+++ b/src/app/foodcard/foodcard.component.html
@@ -1,7 +1,7 @@
 <div cdkDropListGroup class="foodcard">
 	<div *ngFor="let title of foodcard.Titles; let i = index">
 		<app-title [title]="title"></app-title>
-		<div class="flex">
+		<div class="grid">
 			<button class="button"
 				type="button"
 				(click)="insertMainSection(i)">Einfügen Hauptteil</button>
-- 
2.39.5