I was trying to create a responsive grid layout with tailwindcss but I could not center the texts vertically in grid. All I could do was center the text horizontally with text-center.
<body>
<div class="grid gap-5 grid-flow-row grid-cols-2 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 text-center ">
<div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
<div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
<div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
<div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
<div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
<div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
...
<div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
</body>
Demo in codepen
You can do it with flex. Just add this flex justify-center items-center to every text div, like that:
<div class="border-2 rounded-lg h-20 lg:h-32 flex justify-center items-center">Text</div>
It will make it flex container with children centered both horizontally and vertically.
And you can also remove text-center from wrapper since it will be redundant.
You can use justify-self-center to horizontally center text inside grid column. and self-center to vertically center text/content inside grid column. For added clarity, content-center to vertically center grid Column, aka like a child div inside parent grid container. justify-center for horizontal. The question you have to ask is, do I want to effect the grid column position? or the grid column contents position?
Related
In my web project, I'm trying to reproduce the following card:
When the Card is not active it is characterized by the fact that the image is always in the center even though the title has a dynamic height, and when its active (i.e it has the blue background) I don't want to change the height of the card but just to push the image up a little bit to add that extra space where the new round arrow button will appear and I'm completely unable to make this happen.
I'm using tailwind in a Nextjs project but plain and simple html and css would also be fine.
You could use flexbox to align the content to the bottom of the card and give the text a fixed height when inactive to keep it at the same position regardless of whether it spans one or two lines.
To move everything up for the arrow you could render an arrow element below the text when he card is active and it would automatically push everything up. You could remove the fixed height of the text when active so there is no gap between the text and arrow. I have created an example here https://play.tailwindcss.com/7h1IY8alDQ.
Here is the code:
<div class="flex h-screen space-x-4 bg-blue-100 p-6">
<!-- card 1 -->
<div class="group flex h-32 w-32 flex-col items-center justify-end space-y-2 rounded-lg border-4 border-white bg-white p-2 hover:border-[#5691C3] hover:bg-[#80B2D5]">
<!-- icon -->
<div class="h-10 w-10 bg-gray-300 group-hover:bg-white"></div>
<!-- title -->
<p class="h-8 text-center text-xs text-black group-hover:h-auto group-hover:text-white group-hover:underline">Motor</p>
<!-- arrow -->
<div class="relative hidden h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 border-white text-sm group-hover:flex"></div>
</div>
<!-- card 2 -->
<div class="group flex h-32 w-32 flex-col items-center justify-end space-y-2 rounded-lg border-4 border-white bg-white p-2 hover:border-[#5691C3] hover:bg-[#80B2D5]">
<!-- icon -->
<div class="h-10 w-10 bg-gray-300 group-hover:bg-white"></div>
<!-- title -->
<p class="h-8 text-center text-xs text-black group-hover:h-auto group-hover:text-white group-hover:underline">Workmen Compensation</p>
<!-- arrow -->
<div class="relative hidden h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 border-white text-sm group-hover:flex"></div>
</div>
</div>
Hi I want to create a layout which emulates selecting filter in a camera app (like snapchat or Instagram) using just css and scroll snapping.
Reference:
I have achieved a solution but the problem is, it is not responsive. The snapping misaligns when the width is changed. So, my solution is only good for one resolution. Ideally, When the screen width is changed - the "filters" or circular divs should snap in the middle of the ring.
Here's my solution (using tailwindcss):
<div style="background: url('https://images.pexels.com/photos/13025682/pexels-photo-13025682.jpeg?auto=compress')" class="relative h-screen w-full overflow-hidden bg-cover">
<div class="absolute bottom-4 h-24 w-full">
<div class="flex w-full items-center justify-center">
<div class="h-16 w-16 rounded-full border-2"></div>
<div class="absolute left-0 w-full bg-red-500/20">
<div class="hide-scrollbar relative flex w-full snap-x snap-mandatory space-x-[4em] overflow-scroll pl-[22.10em] pr-[24em]">
<div class="h-12 w-12 flex-shrink-0 snap-center rounded-full bg-blue-200"></div>
<div class="h-12 w-12 flex-shrink-0 snap-center rounded-full bg-blue-200"></div>
<div class="h-12 w-12 flex-shrink-0 snap-center rounded-full bg-blue-200"></div>
<div class="h-12 w-12 flex-shrink-0 snap-center rounded-full bg-blue-200"></div>
<div class="h-12 w-12 flex-shrink-0 snap-center rounded-full bg-blue-200"></div>
<div class="h-12 w-12 flex-shrink-0 snap-center rounded-full bg-blue-200"></div>
<div class="h-12 w-12 flex-shrink-0 snap-center rounded-full bg-blue-200"></div>
<div class="h-12 w-12 flex-shrink-0 snap-center rounded-full bg-blue-200"></div>
<div class="h-12 w-12 flex-shrink-0 snap-center rounded-full bg-blue-200"></div>
<div class="h-12 w-12 flex-shrink-0 snap-center rounded-full bg-blue-200">0</div>
</div>
</div>
</div>
</div>
</div>
Here's the above code in action: https://play.tailwindcss.com/VLhEtnYXmH
How do I make the UI responsive?
Well, I think your problem isn't exactly the snap distance but the way you handled this element...
You have to create kind of "dumb" items before and after your circle elements with a shrink-0 class :
<!-- Begin Dumb item -->
<div class="snap-center shrink-0">
<div class="w-dumb shrink-0"></div>
</div>
<!-- End Dumb item -->
and a width matching your screen (so, you need a css calc()).
Unfortunately, there's no such calc class in Tailwind that I know of...
So you have to create a custom class in this "dumb" element, before and after yours and add this css :
.w-dumb {
width: calc((50vw) - 3rem)
}
(Note that I added this custom class in my "dumb" html element
Here's a working sandbox :
https://play.tailwindcss.com/YUKxiYgu2l
(I took advantage of the opportunity to correct a little your structure and css classes)
Edit
Note that if you want to make the space bigger between your circle elements, you just have to change the tailwind class gap-6 to, let's say gap-10. But if you do so, you have to adapt the .w-dumb class and put a higher minus rem (width: calc((50vw) - 4rem for a gap-10 for example).
I have following sample, written in tailwind css:
https://play.tailwindcss.com/f9iOK1e0oM
I want to have my control buttons on the bottom if the grid containers, however, they have different content sizes for the blue "tag" boxes, so the grid gets increased in height by some containers. however, as I am working with grid, all boxes are getting this height then. this is ok. But my control buttons should be always on the bottom of the containers, so that "Enabled" and "Delete" should not be so far away from bottom for the second container.
How to achieve this?
You need to add flex flex-col to the li element. And grow to the first child div and grow-0 max-h-max to the second child div.
<li class="flex flex-col col-span-1 divide-y divide-gray-200 rounded-lg bg-white shadow">
<div class=" grow flex w-full flex-col items-start justify-between p-6">
<div class="flex w-full items-start justify-between space-x-3">
<h3 class="truncate text-sm font-medium text-gray-900">243rfh83294d-23r8fj2n48r-24fi43bf</h3>
<span class="inline-block flex-shrink-0 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800"> running </span>
</div>
<p class="mt-1 whitespace-pre-wrap text-xs font-bold text-gray-500">Interval: <span class="font-normal">1234</span></p>
<p class="mt-1 whitespace-pre-wrap text-xs font-bold text-gray-500">Next run: <span class="font-normal">1234</span></p>
<p class="mt-1 whitespace-pre-wrap">
<span class="inline-block flex-shrink-0 rounded-full bg-blue-100 px-2 py-0.5 text-xs text-blue-800">test 1</span>
</p>
</div>
<div>
<div class="-mt-px flex shrink-0 grow-0 divide-x divide-gray-200 max-h-max">
<div class="flex w-0 flex-1">
<button class="relative -mr-px inline-flex w-0 flex-1 items-center justify-center rounded-bl-lg border border-transparent py-4 text-sm font-medium text-gray-700 hover:text-gray-500">
<span class="ml-3">Enabled</span>
</button>
</div>
<div class="-ml-px flex w-0 flex-1">
<button class="group relative inline-flex w-0 flex-1 items-center justify-center rounded-br-lg border border-transparent py-4 text-sm font-medium text-gray-700 transition hover:text-red-500">
<span class="ml-3">Delete</span>
</button>
</div>
</div>
</div>
</li>
https://play.tailwindcss.com/ilTMM5glku
I have done this only for the second card, but you should do it for all cards. So that when the content changes, the button row will always stick to the bottom and keep the same height in all cards.
Hope this helps.
I am using Tailwind and I made this div:
The problem is that it looks like this when I shrink it down:
With white-space: nowrap it goes out of the div.
I am not able to fix this issue. However, I have made it go into columns when it goes below md screen however not sure how I can stop it from making another line when resolution changes.
Code:
<div className='bg-gray-1000 rounded shadow border border-opacity-50 text-white flex flex-col lg:flex-row w-7/12 mx-auto justify-between p-2 mb-2 items-center md:space-x-16 whitespace-nowrap'>
<div className='bg-primary rounded w-14 h-14 flex items-center'>
<img src={props.logo}/>
</div>
<div className='flex flex-col flex-grow'>
<div>{props.title}</div>
<div className='flex'>
<div><img className='w-6 mt-1' src={props.flag}/></div>
<div><FaInfoCircle className='inline ml-2 text-xl'/></div>
<div><button className={`ml-2 rounded px-4 py-0 text-sm uppercase bg-${props.color}-600`} disabled>{props.mode}</button></div>
</div>
</div>
<div className='flex flex-col'>
<div><FaCalendar className='inline mr-2 text-xl'/> {props.date}</div>
<div className='mt-1'><FaClock className='inline mr-2 text-xl'/> {props.time}</div>
</div>
<div className='flex flex-col'>
<div> <FaUsers className='inline mr-2 text-xl'/> {props.vs}</div>
<div className='mt-1'><FaUsers className='inline mr-2 text-xl'/> {props.slots} Slots</div>
</div>
<div className='flex flex-col md:pr-4'>
<div><AiFillDollarCircle color='green' className='inline mr-2 text-xl'/></div>
<div className='mt-1'><AiFillTrophy className='inline mr-2 text-xl md:text-2xl'/> {props.prize}</div>
</div>
</div>
the best solution for you if you don't want to make the fonts smaller, IMO would be: adding a wrapper on three columns at the right and making it a flex with justify-content: space-between.
It will adjust the gaps according the space left for use.
seems your title at the left content is dynamic and it can get really long, try limiting text width and using text-overflow: ellipsis on it. otherwise you cannot fit long text beside other content.
In tailwind how to place Text 1 at the center vertically and horizontally without using any padding or margin ? I want to have separate widths for two rows.
<div class="grid grid-row-2 justify-items-center items-center">
<div class="border-2 h-24 "> Text 1 </div>
<div class="border-2 self-center"> Text 2 </div
</div>
https://play.tailwindcss.com/7Zog1vjVEh
You are missing some classes in your code. See correct code below
<div class="grid grid-row-2 justify-items-center items-center">
<div class="border-2 w-24 h-24 justify-center items-center flex">Text 1</div>
<div class="border-2 self-center">Text 2</div>
</div>
I have created a demo for you. https://play.tailwindcss.com/CrUCSx4Fbp
You could use the align-content classes https://tailwindcss.com/docs/align-content : you could add flex flex-wrap content-around classes to your h-24 element, and wrap your text between tags to vertically center it.
<div class="grid grid-row-2 justify-items-center items-center">
<div class="border-2 h-24 flex flex-wrap content-around"><div>Text 1</div></div>
<div class="border-2 self-center">Text 2</div
</div>
https://play.tailwindcss.com/JiPa45W4RR