GridGuard Copy this Tailwind GridLayoutto Your Project

<div className="container mx-auto px-4 mt-[40px] mb-[100px] h-full "> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> {list && list.map((todoList, index) => { const totalItems = todoList.todoItems.length; const completedItems = todoList.todoItems.filter(item => item.completed).length; return ( <div key={index} className="col-span-1"> <Link to={`/editor/todo/${todoList.id}`}> <Card className="p-4 cursor-pointer hover:shadow-md transition-shadow bg-background h-full border-border"> <div className="flex items-center justify-between"> <h4 className="text-lg leading-tight tracking-tighter lg:leading-[1.1]">{todoList.title}{' '}{' '}</h4> <div> {todoList.isPriority === true ? <CircleAlert /> : todoList.completed === true ? <Check /> : todoList.isTrashed === true ? <Trash /> : null} </div> </div> <div className="mt-2 flex items-center justify-between"> <p className="text-muted-foreground text-thin text-left"> {todoList.username} </p> <p className="text-muted-foreground text-thin text-left"> {completedItems}/{totalItems} </p> </div> </Card> </Link> </div> ) })} </div> </div> im trying to containt the List inbetween the its divs becasue its parent has mensuas that the lists content is gettting stuck behind