Making up task list layout.

src/app/task-lists/task-lists.component.html

@@ -1,4 +1,14 @@
 <button mat-raised-button (click)="addNewList()">Nouvelle liste</button>
-<div *ngFor="let list of taskLists$ | async">
+<div class="task-list-container">
-    <h1>{{list?.name}}</h1>
+    <div *ngFor="let list of taskLists$ | async" class="task-list">
+        <div class="card">
+            <span *ngIf="list?.tasks?.length">
+                {{list?.tasks?.length}} tâches
+            </span>
+            <span *ngIf="!list?.tasks?.length">
+                Aucune tâche
+            </span>
+        </div>
+        <h3>{{list?.name}}</h3>
+    </div>
 </div>

src/app/task-lists/task-lists.component.scss

@@ -0,0 +1,23 @@
+.task-list-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    .task-list {
+        width: 10rem;
+        margin: 1rem;
+
+        .card {
+            height: 10rem;
+            border: 1px solid black;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: .3rem;
+        }
+        h3 {
+            display: flex;
+            justify-content: center;
+        }
+    }
+}