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
Related
I have a simple flexbox with a column grid of 2.
<div class="flex relative">
<div class="columns-2 gap-4 space-y-4">
<div class="bg-red-500 p-10">1</div>
<div class="bg-blue-500 p-10 py-14">2</div>
<div class="bg-orange-500 p-10 py-20">3</div>
<div class="bg-green-500 p-10">4</div>
</div>
</div>
The problem is the arrangement of the columns is in the "wrong" direction. The first row contains div1 and div3 but I want it to contain div1 and div2. How can I change the direction?
I want the divs to align like this:
Actually you are not using the grid of tailwind-css !! to use change the columns:2 to grid grid-cols-2
<div class="flex relative">
<div class="grid grid-cols-2 gap-4 space-y-4"> 👈 grid grid-cols-2
<div class="bg-red-500 p-10">1</div>
<div class="bg-blue-500 p-10 py-14">2</div>
<div class="bg-orange-500 p-10 py-20">3</div>
<div class="bg-green-500 p-10">4</div>
</div>
</div>
Now you can see the div1 and div2 are placed in the same row.
Edit:
But this will position the div but the grid looks similar. How to overcome this ?
Use the following code:
<div class="grid grid-cols-2 grid-rows-5 gap-4">
<div class="row-span-2 flex h-64 items-center justify-center bg-red-500 text-5xl">1</div>
<div class="row-span-3 flex items-center justify-center bg-blue-500 text-5xl">2</div>
<div class="row-span-2 flex items-center justify-center bg-orange-500 text-5xl">3</div>
<div class="row-span-2 flex items-center justify-center bg-green-500 text-5xl">4</div>
</div>
Output:
Tailwind-play
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 to place two column side by side. One of these columns has a fixed width. I am really trying hard to understand why the fixed width in one column is not working on Tailwind CSS flexbox.
I have the following code:
<div class="flex flex-row justify-between items-start shrink-0">
<p class="mt-4 h-14 overflow-hidden leading-7">This title pushed back the next element</p>
<div class="p-1 w-16 h-16 text-white text-center">
<p class="text-sm">05</p>
<p class="text-3xl leading-none font-bold">JUNE</p>
</div>
</div>
Tailwind Version: 3.0.23
Output:
Inspect Element:
Expected output:
Actually when using flex , it shrinks itself if not explicitly specified for responsive design
Refer the tailwind flex-shrink documentation https://tailwindcss.com/docs/flex-shrink
It says to use the flex-shrink-0 css property i.e shrink-0 class to avoid the width from being shrinked due to variable width size.
So code should look like:
<div className="flex flex-row justify-between items-start">
<p className="mt-4 h-14 overflow-hidden leading-7">
This title pushed back the next element and this is the long text to
check the overflow of the text and lets see if this actually works
</p>
<div className="p-1 w-16 h-16 text-white text-center shrink-0 bg-purple-500">
<p class="text-sm">JUN</p>
<p class="text-3xl leading-none font-bold">05</p>
</div>
And the output looks like :
<div class="flex flex-row justify-between items-start shrink-0">
<p class="mt-4 h-14 w-[70%] overflow-hidden leading-7">This title pushed back the next element</p>
<div class="p-1 w-[15%] h-16 text-white text-center">
<p class="text-sm">05</p>
<p class="text-3xl leading-none font-bold">JUNE</p>
</div>
</div>
Maybe like this work
You can simply use flex properties here while keeping the width same.
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-row justify-between items-start ">
<div>
<p class="py-2 px-2 h-14 overflow-hidden leading-6">This title pushed back the next element
his title pushed back the next element.</p>
</div>
<div class="px-2 w-16 h-16 mr-2 text-white bg-purple-500 text-center">
<p class="text-sm">June</p>
<p class="text-3xl leading-none font-bold">05</p>
</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 am using tailwind in my Vuejs app. I have this simple template
<template>
<div class="bg-gray-500 h-screen">
<Header /><!-- //height 32 -->
<div class="w-2/3 mx-auto p-4 text-lg bg-white h-full shadow-lg">
<router-view />
</div>
</div>
</template>
The div with h-screen is the root or my app. The component<header> has a tailwind height of h-32
The problem is that the second div causes the page to scroll at the bottom, the height of the <header> (h-32).
What I want to do
If there is no content, I want the second div to fill the remaining height of the screen but no more.
If there is content, I want it grow as necessary.
You can leverage .flex, .flex-col and .flex-1 for this. Check out docs.
<div class="bg-gray-500 flex flex-col h-screen">
<div class="flex h-32 bg-gray-200"></div>
<div class="flex-1 w-2/3 mx-auto p-4 text-lg bg-white h-full shadow-lg bg-gray-300">
<router-view />
</div>
</div>
Usage of flex-1 is optimal for your solution to expand a certain component in the parent:
Use flex-1 to allow a flex item to grow and shrink as needed, ignoring its initial size:
Vertically
<div class="flex h-screen flex-col">
<div class="h-50 bg-cyan-400 text-center text-4xl">Header</div>
<div class="flex-1 bg-yellow-400 text-center text-4xl">I am the body</div>
</div>
Output:
Horizontally
<div class="flex w-screen ">
<div class="h-50 bg-cyan-400 text-center text-4xl">NavBar</div>
<div class="flex-1 bg-yellow-400 text-center text-4xl">I am the body</div>
</div>
Output: