app.component: change buttons per grid

diff --git a/src/app/app.component.css b/src/app/app.component.css
index ba3c7a17acf22b1c22f728670f1a52bf3b41797b..09f22bf708a30b3945dc5f7dd7651676d096c0e0 100644 (file)
--- 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 36177f5147e40a35ac1ce9e1960cfc4956383e95..c1128a0602a7c764804c209cd2094637e4b7d395 100644 (file)
--- 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)" />