foodcard.component: change: buttons with grid

diff --git a/src/app/foodcard/foodcard.component.css b/src/app/foodcard/foodcard.component.css
index 8e03a20acd9368039bc943e02f967e25a6562e6b..b8b51fb988d1d7d00f81ceafabc640c56da42453 100644 (file)
--- 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 bc6f0e1b3439dd8ca5922b7792926a2a6d638e39..43cea4525d9fd8e6014862ff66598b0d0dac491c 100644 (file)
--- 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>