Offres séparés

src/app/pages/offres-carte/offres-carte.page.html

 <ion-list-header>Catégories :</ion-list-header>
 <div class="app">
-  <ul class="hs">
+  <ul class="hs" no-margin margin-bottom>
     <li *ngFor="let category of _TRIP.cats" class="item">
       <ion-chip (click)="_TRIP.filterList(category.id)">
         <ion-label>{{ category.label }}</ion-label>

src/app/pages/offres-carte/offres-carte.page.scss

@@ -92,12 +92,6 @@
     padding: 0;
   }
   
-  h1,
-  h2,
-  h3 {
-    margin: 0;
-  }
-  
   .app {
     // background: #DBD0BC;
     overflow-y: scroll;

src/app/pages/offres-tlm/offres-tlm.page.html

-<ion-header>
-  <ion-toolbar>
-    <ion-title>offres-tlm</ion-title>
-  </ion-toolbar>
-</ion-header>
-
 <ion-content>
-
+  <ion-list-header>Meilleures deals</ion-list-header>
+  <div class="app">
+    <ul class="hs">
+      <li class="item">test</li>
+      <li class="item">test</li>
+      <li class="item">test</li>
+      <li class="item">test</li>
+      <li class="item">test</li>
+      <li class="item">test</li>
+    </ul>
+  </div>
+  <ion-list>
+    <ion-item>
+      Offre
+    </ion-item>
+  </ion-list>
 </ion-content>
\ No newline at end of file

src/app/pages/offres-tlm/offres-tlm.page.scss

+.app {
+//   padding: 20px 0;
+  display: grid;
+  grid-gap: 20px 0;
+  grid-template-columns: 10px 1fr 10px;
+  align-content: start;
+}
+
+.app > * {
+  grid-column: 2 / -2;
+}
+
+.app > .full {
+  grid-column: 1 / -1;
+}
+
+.hs {
+  display: grid;
+  grid-gap: calc(20px / 2);
+  grid-template-columns: repeat(6, calc(50% - 20px * 2));
+  grid-template-rows: minmax(150px, 1fr);
+
+  overflow-x: scroll;
+  scroll-snap-type: x proximity;
+  padding-bottom: calc(0.75 * 20px);
+  margin-bottom: calc(-0.25 * 20px);
+}
+
+/* Demo styles */
+
+ion-content {
+  display: grid;
+  place-items: center;
+  background: #456173;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+.app {
+//   width: 375px;
+//   height: 667px;
+  background: #dbd0bc;
+  overflow-y: scroll;
+}
+
+.hs > li,
+.item {
+  scroll-snap-align: center;
+  padding: calc(20px / 2 * 1.5);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: #fff;
+  border-radius: 8px;
+}