Menu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./dist/output.css">
<script src="./dist/main.js"></script>
</head>
<body class="flex h-screen items-center justify-center">
<div id="container" class="relative bg-orange-300 w-4/5 h-screen">
<ul>
<li class="grid grid-cols-2">
<div class="task-div col-span-1">
<h1 class="task-title">Hello</h1>
<p class="task-desc">My name if Bishal</p>
</div>
<button class="col-span-1"><img class="w-6 h-6" src="./icon/bin.png" alt="Del"></button>
</li>
<li class="grid grid-cols-2">
<div class="task-div col-span-1">
<h1 class="task-title">Hello</h1>
<p class="task-desc">My name is Bishal</p>
</div>
<button class="col-span-1 w-6 h-6"><img class="w-6 h-6" src="./icon/bin.png" alt="Del"></button>
</li>
</ul>
<a href="#" id="new-task" class=" z-10 absolute bottom-10 right-10 text-5xl ">+
</a>
</div>
</body>
</html>
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.task-div {
@apply px-2 pb-2 border-2 mx-2 mt-2 h-[75px] overflow-hidden
}
}
@layer components {
.task-title {
@apply text-xl font-bold inline-block
}
}
@layer components {
.task-desc {
@apply text-sm
}
}
I can make the button inside task div with positioning but I am not good with css grid. i wanna learn I believe this should look like :
.class-name {
grid-template-column : 1fr auto;
}
problem : those 2 columns are taking half half space. but the task div should take the remaining space.
i tried switching col-span-1 and col-auto on the button and on the task div too. But nothing works out
expectation : i want to make the div class with task-div take the full space on the left side and the delete button on the right side take only the width assigned. as 'Del' button doesn't need to take the half of the container.
You are indeed correct with setting 1fr auto. You should replace the grid-cols-2 class with grid-cols-[1fr_auto] to apply grid-template-columns: 1fr auto. See this Tailwind Play for a live example.
145
answered Oct 17 '25 01:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With