From 018eed9ef0e54f25dd79077bd17b9f289803c1a0 Mon Sep 17 00:00:00 2001
From: Bastian Dehn <hhaalo@arcor.de>
Date: Thu, 18 Aug 2022 17:55:42 +0200
Subject: [PATCH] app.component: change buttons per grid

---
 src/app/app.component.css  | 25 +++++++++++++++++--------
 src/app/app.component.html |  2 +-
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/app/app.component.css b/src/app/app.component.css
index ba3c7a1..09f22bf 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -3,17 +3,18 @@
 	margin: 0 0.5em;
 }
 
-.flex {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
+.grid {
+	display: grid;
+	grid-template-columns: repeat(12, 1fr);
 }
 
 input {
+	grid-column: 1/13;
 	margin: 0.2em
 }
 
 .button {
+	grid-column: 1/13;
 	margin: 0.2em;
 }
 
@@ -26,12 +27,20 @@ h1 {
 }
 
 @media only screen and (min-width: 46.875em) {
-	.flex {
-		flex-direction: row;
+	input {
+		grid-column: 2/5;
 	}
 
-	.button {
-		
+	.button:nth-of-type(1) {
+		grid-column: 5/7;
+	}
+
+	.button:nth-of-type(2) {
+		grid-column: 7/9;
+	}
+
+	.button:nth-of-type(3) {
+		grid-column: 9/11;
 	}
 }
 
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 36177f5..c1128a0 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,6 +1,6 @@
 <div class=foodcardeditor>
 	<h1>Speisekarten-Editor</h1>
-	<div class="flex">
+	<div class="grid">
 		<input type="file"
 			name="fileupload"
 			(change)="fileEvent($event)" />
-- 
2.39.5