I'm using Tailwind CSS for my project. I'm stuck with a minor problem. I have a 3-column grid and I want to set different heights for each column.
I have tried this code
<div class="grid grid-cols-3 grid-rows-2 gap-2">
<div class="bg-green-200 col-span-full h-auto">Box1</div>
<div class="bg-white rounded-md shadow-sm h-[40px]">Box2</div>
<div class="bg-white rounded-md shadow-sm h-auto">Box3</div>
<div class="bg-white rounded-md shadow-sm h-[250px]">Box4</div>
</div>
In the above code when I set the height to a specific item within the grid it applies to all remaining items for example if I set h-10 to Box1 it will be applied to all remaining boxes.
Here is what I'm looking for, I want to set these specific heights -
Box1 - h-auto
Box2 - h-[40px]
Box3 - h-auto
Box4 - h-[250px]
From your question,
when I set the height to a specific item within the grid it applies to all remaining items for example if I set h-10 to Box1 it will be applied to all remaining boxes.
But ,in the following code I have changed the height of Box1 to h-10 , which is not changing any div's height!
<div class="grid grid-cols-3 grid-rows-2 gap-2">
<div class="col-span-full h-10 bg-green-200">Box1</div>
<div class="h-[40px] rounded-md bg-blue-500 shadow-sm">Box2</div>
<div class="h-auto rounded-md bg-orange-400 shadow-sm">Box3</div>
<div class="h-[250px] rounded-md bg-amber-200 shadow-sm">Box4</div>
</div>
Before
Box1 => h-auto
After
Box1 => h-10
What are you actually looking for ? Can you be precise.
Related
I'm having trouble with tailwindcss grid layout. I want a page with 3 columns. Column 1 or sidebarleft should occupy 10-15% of screen. Column 2 or main content should occupy 70-80% of screen. and column 3 or sidebar right should occupy 10-15% of screen as well. How can I achieve this with tailwindcss?
I have the following; column 3 should be a child of column 3 I think.
<div className="grid grid-cols-3 grid-rows-1 h-screen gap-2 grid-flow-col">
<div className="bg-green-100 text-green-500 text-lg font-bold text-center">Sidebar left</div>
<div className="bg-green-100 text-green-500 text-lg font-bold text-center col-span-2">Main content</div>
<div className="bg-green-100 text-green-500 text-lg font-bold text-center">side bar right</div>
</div>
Thanks in advance.
You can increase the number of columns in your grid to 10, then give each div a col-span-x depending on the width you want:
<div class="grid grid-cols-10 grid-rows-1 h-screen gap-2 grid-flow-col">
<div class="bg-green-100 text-green-500 text-lg font-bold text-center col-span-1">Sidebar left</div>
<div class="bg-green-100 text-green-500 text-lg font-bold text-center col-span-8">Main content</div>
<div class="bg-green-100 text-green-500 text-lg font-bold text-center col-span-1">side bar right</div>
</div>
Tailwind-play
Because you want your width to be more dynamic, I wouldn't use grid here but flex.
This way, you can easily control the minimum and maximum width of each div.
<div class="flex gap-2 h-screen">
<div class="bg-green-100 text-green-500 text-lg font-bold text-center min-w-[10%] max-w-[15%]">Sidebar left</div>
<div class="bg-green-100 text-green-500 text-lg font-bold text-center grow">Main content</div>
<div class="bg-green-100 text-green-500 text-lg font-bold text-center min-w-[10%] max-w-[15%]">side bar right</div>
</div>
Tailwind-play
You need to use grid-cols-* and grid-rows-* properties in the parent div and use col-span-* in the child. (Note: Here, * means number). You get clear idea from example.
see here
I am trying to understand TailwindCSS and currently trying to make responsive employee card. But the problem i have recently encountered is that my card seems responsive for all breakpoints of tailwind but only when the height is 900. Whenever i increase the height i get more space at the bottom and whenever i shrink the window height the contents get overflowed.
How do i make it responsive for all heights and widths?
[Works perfectly only when the height is 900 and within Tailwind Breakpoint Width Range]
Here is the Live Site Preview
Here is the Github Repo-Code
Code -
<body class="flex justify-center items-center h-screen w-full">
<div class="main-container bg-slate-500 min-h-3/6 w-8/12 sm:w-8/12 sm:min-h-3/6 md:w-7/12 md:min-h-2.5/6 lg:w-5/12 lg:min-h-2.5/6 xl:w-4/12 xl:min-h-2.5/6 2xl:w-3.5/12 2xl:min-h-4/6 flex justify-center items-center py-20">
<div class="container bg-slate-200 w-8/12 h-4/6 flex flex-col rounded-lg">
<div class="title py-4 px-5 font-bold">The title of the card here</div>
<div class="review-date grid grid-cols-2 bg-white w-full h-1/6 items-center p-2 px-4 text-center">
<div class="review flex justify-center items-center text-xs bg-orange-700 text-white font-semibold p-1 sm:w-10/12 sm:py-1 rounded-full uppercase select-none">
UNDER REVIEW
</div>
<div class="date flex justify-end items-center text-xs font-semibold select-none">
May 14, 1988
</div>
</div>
<div class="comment bg-white border-t border-slate-100 w-full">
<p class="commentdata bg-slate-200 text-left text-sm p-3 m-4 rounded-lg select-none">Here is a short comment about this employee.</p>
</div>
<div class="employeedata px-4 pt-2 pb-4">
<div class="employee uppercase">
<label class="text-xs font-bold text-slate-600">Employee</label>
</div>
<div class="employeebar flex mt-2">
<div class="employee-logo bg-sky-800 text-white text-xs font-bold w-10 h-10 rounded-full flex justify-center items-center">VG</div>
<div class="employee-info flex flex-col ml-4">
<div class="employee-name text-sm font-bold flex pb-0.5">Mohammad Mustak</div>
<div class="employee-title text-xs text-slate-600">Web Developer</div>
</div>
</div>
</div>
</div>
</div>
</body>
How do i make it responsive for all heights and widths?
Declare width, height, padding etc. using:
Viewport Units
vw
vh
vmin
vmax
and then, if needed:
Small Viewport Units
svw
svh
Large Viewport Units
lvw
lvh
Dynamic Viewport Units
dvw
dvh
Further Reading:
Relative Length Units at MDN
Using Minimum Height to the main-container did solve the issue.
<div class="main-container bg-slate-500 min-h-3/6 w-8/12 sm:w-8/12 sm:min-h-3/6 md:w-7/12 md:min-h-2.5/6 lg:w-5/12 lg:min-h-2.5/6 xl:w-4/12 xl:min-h-2.5/6 2xl:w-3.5/12 2xl:min-h-4/6 flex justify-center items-center py-20">
I would have suggested using bootstrap instead of tailwind, but in this case you will need to manipulate the tailwinds css to be able to get whatever you desire using media queries that has min-height in them:
#media all and (max-height: 600px) {
/* your css after this line */
}
I have 2 divs under 1 div.
first div should be w-64.
second div's width want to be the rest except for 64.
How to make it?
and if I use grid then how to make that?
<div className="w-screen h-screen">
<div className="fixed top-0 left-0 w-64 h-screen" >
</div>
<div className="flex bg-blue-100 justify-center items-center">
{children}
</div>
</div>
You can add to the second div two Tailwind properties:
w-[calc(100vw-16rem)], where 100vw is a fullscreen and w-64 = width: 16rem; /* 256px */), then we calculate the width of the div.
After that we offset the second div with ml-auto.
<div className="w-screen h-screen">
<div className="fixed top-0 left-0 w-64 h-screen"></div>
<div className="grid w-[calc(100vw-16rem)] ml-auto bg-blue-100 justify-center items-center">
{children}
</div>
</div>
Grid solution
For the grid, we need to add a grid property to the parent element and set two columns grid-cols-[16rem_calc(100vw-16rem)]. The first column is static, and the second is responsive. We also need to remove all properties from the first child element.
<div className="grid grid-cols-[16rem_calc(100vw-16rem)] w-screen h-screen ">
<div className="flex"></div>
<div className="flex bg-blue-100 justify-center items-center">
{children}
</div>
</div>
I have this div that's supposed to represent a button next to an input. Ideally on resolution change, the input element's width shrinks but the button stays the same height and width.
<div className="flex flex-row rounded-lg border border-white border-solid hover:cursor-pointer py-2 px-2 w-28">
<AddIcon></AddIcon>
<div className="flex font-sans text-base font-medium">Add site</div>
</div>
I set the w-28 property thinking it could achieve this. However, the button changes width if I shrink the window or screen it appears on, and I'm not sure why.
This is the full component:
<div id="settings" className="w-3/4 h-5/6 bg-blue-300 self-center">
<div id="settings-content" className="flex flex-col self-center mx-5">
<div id="header" className="flex flex-col mt-5">
<div id="title" className="font-sans font-bold text-3xl">Block Sites</div>
</div>
<div id="subtitle" className="font-sans text-base font-medium text-neutral-600">Visiting these sites will stop point acquisition until you reset the timer</div>
<div id="block-site-add-list" className="flex flex-row mt-16 justify-between bg-amber-400 shrink-0">
<div className="flex flex-row rounded-lg border border-white border-solid hover:cursor-pointer py-2 px-2 w-28">
<AddIcon></AddIcon>
<div className="flex font-sans text-base font-medium">Add site</div>
</div>
<input className="ml-5 flex-grow bg-red-500"></input>
</div>
</div>
</div>
This is what the button looks like with a smaller screen, when both words should be on the same line:
You could try adding whitespace-nowrap to your label div to ensure that the text doesn't wrap to two lines. Since you have your elements (button and input) wrapped in another flex, you can add shrink-0 to your wrapper div to keep its size.
For example:
<div id="block-site-add-list" className="flex flex-row ...">
<div className="shrink-0 flex flex-row ...">
<AddIcon></AddIcon>
<div className="whitespace-nowrap font-sans text-base font-medium">Add site</div>
</div>
<input className="ml-5 grow bg-red-500"></input>
</div>
I have a flexbox with 3 children items that looks something like this:
<section className="px-5 flex flex-col md:flex-row md:space-x-10 justify-around">
<div className="flex flex-col py-3 md:flex-grow"><input ... /></>
<div className="flex flex-col py-3 md:flex-grow"><input ... /></>
<div className="flex flex-col py-3 md:flex-grow"><input ... /></>
</section>
This works fine in full screen, however flex items start to break out of parent after shrinking the window width (near 1000px).
How can I make it so the items stay inside their parent?
Fullscreen
After shrinking window width
What I would like to achieve
By adding flex-wrap class in the parent(section tag in your case) will fix the issue.
Read more about flex-wrap https://tailwindcss.com/docs/flex-wrap
If you use flexbox, you can use flex wrap property to solve your proble.,
But i try to get the same result with grid
<div class="container py-10">
<section class="grid grid-cols-3 gap-4 p-5 border border-gray-400 rounded-lg">
<div class="w-full h-20 bg-orange-200 border border-orange-400 rounded-md"></div>
<div class="w-full h-20 bg-orange-200 border border-orange-400 rounded-md"></div>
<div class="w-full h-20 bg-orange-200 border border-orange-400 rounded-md"></div>
</section>
</div>
This is better i think :)