diff --git a/src/components/TodoList.tsx b/src/components/TodoList.tsx
index 0755e62..89e77ba 100644
--- a/src/components/TodoList.tsx
+++ b/src/components/TodoList.tsx
@@ -17,11 +17,11 @@ interface TODOtype {
 }
 
 const TodosStyled = styled.div`
-  display: flex;
+  display: grid;
   height: 92%;
   overflow: scroll;
   justify-content: center;
-  flex-wrap: wrap;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   .description {
     height: 100px;
     overflow: scroll;
@@ -54,7 +54,7 @@ const TodoList = (props: any) => {
         return (
           <div
             className="card bg-light"
-            style={{ width: "200px", flexGrow: 1, height: "min-content" }}
+            style={{ height: "min-content" }}
             key={todo.hash}
           >
             <div className="card-header">End Date: {todo.date}</div>
@@ -88,7 +88,7 @@ const TodoList = (props: any) => {
         return (
           <div
             className="card bg-light"
-            style={{ width: "200px", flexGrow: 1, height: "min-content" }}
+            style={{ height: "min-content" }}
             key={todo.hash}
           >
             <div className="card-header">End Date: {todo.date}</div>
@@ -131,7 +131,7 @@ const TodoList = (props: any) => {
         return (
           <div
             className="card bg-light"
-            style={{ width: "200px", flexGrow: 1, height: "min-content" }}
+            style={{ height: "min-content" }}
             key={todo.hash}
           >
             <div className="card-header">End Date: {todo.date}</div>
@@ -176,7 +176,7 @@ const TodoList = (props: any) => {
         return (
           <div
             className="card bg-light"
-            style={{ width: "200px", flexGrow: 1, height: "min-content" }}
+            style={{ height: "min-content" }}
             key={todo.hash}
           >
             <div className="card-header">End Date: {todo.date}</div>