I have a simple 2 column grid. I want the first column to control the height. So if the second columns content height is more that the first the overflow will be hidden.
Example. Here, the height in the second column should never be greater than the height of the image in the first column. Any overflow in the second column should be hidden. How can I do this with tailwind?
<div class="grid grid-cols-2">
<div class="bg-red-700">
<img class="object-contain w-36 sm:w-full" src="https://images.unsplash.com/photo-1520333789090-1afc82db536a" alt="" />
</div>
<div class="bg-green-500 p-2">
#for ($count = 0; $count < 10; $count++)
<div class="grid grid-cols-8 my-2">
<div class="col-span-2 sm:col-span-3 p-2 bg-gray-500">
<img class="object-contain w-36 sm:w-full" src="https://images.unsplash.com/photo-1520333789090-1afc82db536a" alt="" />
</div>
<div class="col-span-6 sm:col-span-5 bg-gray-500">
<div class="text-xs text-white pt-1 ml-2">
<h4 class="font-bold">Lorem ipsum</h4>
<p class="">Minus quidem ipsam quia iusto.</p>
</div>
</div>
</div>
#endfor
</div>
</div>
Hello I'm new to tailwind but I think you can use overflow
https://tailwindcss.com/docs/overflow
Related
I need to add 2 children of a parent element one on the top and another on the bottom. something like this.
and this is the code I have.
<div class=" w-full flex justify-betwen bg-white items-center">
<div class="ml-auto">
<img class="object-cover mr-2 md:mr-4 ml-2 md:ml-4 float-left h-40 lg:w-32 w-14 xs:w-16"
src="../img/Bless.png" alt="" />
</div>
<div class="w-full mx-8">
<div class="text-redfull text-ms xs:text-lg md:text-xl lg:text-2xl xl:text-3xl">
Some text here to top as a title.
</div>
<div
class=" text-gray70 flex justify-between items-center text-xs xs:text-base md:text-base lg:text-lg mb-0">
and this is the date to the bottom Uploaded Auguts 4, 2020
</div>
</div>
</div>
Title should stay at the top.
Date to the bottom.
If anyone knows:)
You can add two divs for Title and Date and add vertical margin to them.
I am not sure whether you want with the text or not so I had implemented for both the cases.
Case 1: With text
<script src="https://cdn.tailwindcss.com"></script>
<div class="justify-betwen flex w-full items-center bg-white">
<div class="ml-auto">
<img class="xs:w-16 float-left mr-2 ml-2 h-40 w-14 object-cover md:mr-4 md:ml-4 lg:w-32" src="http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/nebula_blue.s2014.png" alt="" />
</div>
<div class="mx-8 w-full">
<div class="text-3xl font-semibold text-red-900">Your Title here</div>
<div class="my-3">
<div class="text-ms xs:text-lg text-red-500 md:text-xl lg:text-2xl xl:text-3xl">Some text here to top as a title.</div>
<div class="xs:text-base mb-0 flex items-center justify-between text-xs text-gray-500 md:text-base lg:text-lg">and this is the date to the bottom Uploaded Auguts 4, 2020</div>
</div>
<div class="text-base font-extralight">25 June 2022</div>
</div>
</div>
Case 2: Without Text
<script src="https://cdn.tailwindcss.com"></script>
<div class="justify-betwen flex w-full items-center bg-white">
<div class="ml-auto">
<img class="xs:w-16 float-left mr-2 ml-2 h-40 w-14 object-cover md:mr-4 md:ml-4 lg:w-32" src="http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/nebula_blue.s2014.png" alt="" />
</div>
<div class="mx-8 w-full">
<div class="text-3xl font-semibold text-red-900">Your Title here</div>
<div class="my-12">
</div>
<div class="text-lg font-extralight">25 June 2022</div>
</div>
</div>
I had use an online image, so you can replace it with your image.
If You want more gap, then simply increase the my-12 to more.
My code is currently like this :
<div class="container h-auto">
<div class="flex border-8 border-red-900 w-56 h-auto">
<img class="h-autho w-auto" src="https://i.picsum.photos/id/238/200/200.jpg?hmac=O4Jc6lqHVfaKVzLf8bWssNTbWzQoaRUC0TDXod9xDdM" />
<img class="h-autho w-auto" src=" https://i.picsum.photos/id/65/200/200.jpg?hmac=pZrTO_F80X2VYUVpgorpj6xM_WABGhjIXYieK__8B50" />
</div>
</div>
which the images have exceeded the width of the div. I would like the images to auto reduce their size depending on the content inside the div so that they always fit the div. Is it possible?
I made three suggestions for you.
The first two are more specifically exactly for 2 images. Making them the same size with grid-cols-2 respectively w-1/2
The last one works with any number of images, flex-grow applied to all childs of a flex container makes them all the same width.
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="container h-auto mb-4">
<div class="grid grid-cols-2 border-8 border-red-900 w-56 h-auto">
<img class="h-auto w-full" src="https://i.picsum.photos/id/238/200/200.jpg?hmac=O4Jc6lqHVfaKVzLf8bWssNTbWzQoaRUC0TDXod9xDdM" />
<img class="h-auto w-full" src=" https://i.picsum.photos/id/65/200/200.jpg?hmac=pZrTO_F80X2VYUVpgorpj6xM_WABGhjIXYieK__8B50" />
</div>
</div>
<div class="container h-auto mb-4">
<div class="flex border-8 border-red-900 w-56 h-auto">
<img class="w-1/2" src="https://i.picsum.photos/id/238/200/200.jpg?hmac=O4Jc6lqHVfaKVzLf8bWssNTbWzQoaRUC0TDXod9xDdM" />
<img class="w-1/2" src=" https://i.picsum.photos/id/65/200/200.jpg?hmac=pZrTO_F80X2VYUVpgorpj6xM_WABGhjIXYieK__8B50" />
</div>
</div>
<div class="container h-auto mb-4">
<div class="flex border-8 border-red-900 w-56 h-auto">
<div class="flex-grow">
<img class="w-full" src="https://i.picsum.photos/id/238/200/200.jpg?hmac=O4Jc6lqHVfaKVzLf8bWssNTbWzQoaRUC0TDXod9xDdM" />
</div>
<div class="flex-grow">
<img class="w-full" src=" https://i.picsum.photos/id/65/200/200.jpg?hmac=pZrTO_F80X2VYUVpgorpj6xM_WABGhjIXYieK__8B50" />
</div>
</div>
</div>
I am using Tailwind CSS and am trying to build a grid that certain cell contents span multiple cells while other items stay in the single cell. In the code below, I try to show what I am trying to accomplish. I know my col-span-2 class is not doing anything, but I put it there to indicate what I wish I could do. I want all cells to be the same width (I just want some cell content to span over the dividers). Do I need some sort of overlay logic?
Any help is appreciated.
Thanks!
<div id=container class="m-auto p-2">
<div id=theGrid class="grid grid-cols-3 divide-x divide-gray-600">
<div id=cell1 class="px-4 h-24">
Cell 1<br />
<div id=thingThatSpansTwoCells class="h-4 bg-green-700 text-white col-span-2">Spans 2 Cells</div>
</div>
<div id=cell2 class="px-4 h-24">Cell 2</div>
<div id=cell3 class="px-4 h-24">Cell 3</div>
</div>
</div>
You will need to write your own CSS for this. To span 2 column, use width:200% and don't forget to account for the padding you are using:
.w-200 {
width:calc(200% + 3rem);
}
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div id=container class="m-auto p-2">
<div id=theGrid class="grid grid-cols-3 divide-x divide-gray-600">
<div id=cell1 class="px-4 h-24">
Cell 1<br />
<div id=thingThatSpansTwoCells class="bg-green-700 text-white w-200">Spans 2 Cells</div>
</div>
<div id=cell2 class="px-4 h-24">Cell 2</div>
<div id=cell3 class="px-4 h-24">Cell 3</div>
</div>
</div>
I'm just getting started with tailwind and I would like to grid essentially a row of images that fit the container.
Currently I am just stubbing in 2 photos for testing/getting to know tailwind purposes.
<main class="mt-12 lg:mt-32">
<section class="container mx-auto px-6">
<div class="w-full lg:flex items-center">
<div *ngFor="let item of photos">
<p class="text-md lg:text-xl font-light text-gray-800 mb-8">
{{item.description}}
</p>
<div class="grid grid-col-2 gap-2">
<img [src]="image" *ngFor="let image of item.images"
class="object-contain shadow rounded border-none">
</div>
</div>
</div>
</section>
</main>
This code is causing the 2 images to essentially appear underneath each other as seen here
https://i.imgur.com/vhSBkc7.png
Thank you for any help.
Your class should me grid-cols-2 and the img tag should have col-span-1. Checkout Grid Columns
<div class="grid grid-cols-2 gap-2"> // grid-cols-2
<img [src]="image" *ngFor="let image of item.images" class="col-span-1 object-contain shadow rounded border-none"> // col-span-1
</div>
<div class="flex flex-grow h-full w-100">
<div class="flex flex-col bg-white w-1/5">
<div class="dates px-4">
<p>Today</p>
<p>Tomorrow</p>
<p>Upcoming</p>
</div>
<hr />
<div class="projects flex-grow px-4">
<p>Project 1</p>
<p>Project 2</p>
</div>
<div class="footer">
<hr />
<button class="outline-none py-2 border-gray-400 text-red-400 w-full">
Add project
</button>
</div>
</div>
<div class="main bg-gray-100 flex-grow">Hello</div>
<div class="bg-white w-1/5">Hello</div>
</div>
In the above code, I want only the div with class projects to be scrollable while holding the dates and footer fixed on their places. how to do that using tailwind.css ?! I also want the div with class main to be scrollable vertically while holding the other two divs fixed on their places without scrolling.
It sounds a bit like a common usage of overflow-y.
For example, you could add this CSS rule to your project's class:
.projects {
overflow-y: scroll;
}
You can add this rule to whichever container you want to be scrollable - in this case vertically.
On the other, there is overflow-x: scroll for horizontal scrolling, or overflow: scroll for both (shorthand).
According to tailwind overflow guide, you can use .overflow-y-auto for vertical scrolling.
e.g.
<div class="projects flex-grow overflow-y-auto px-4">
It's good that you have used .flex-grow otherwise you would have to give a max-height to the div.
<div class="flex flex-grow h-full w-100">
<div class="flex flex-col bg-white w-1/5">
<div class="dates px-4">
<p>Today</p>
<p>Tomorrow</p>
<p>Upcoming</p>
</div>
<hr/>
<div class="projects h-auto overflow-x-auto flex-grow px-4">
<p>Project 1</p>
<p>Project 2</p>
</div>
<div class="footer">
<hr/>
<button class="outline-none py-2 border-gray-400 text-red-400 w-full">
Add project
</button>
</div>
</div>
<div class="main bg-gray-100 flex-grow">Hello</div>
<div class="bg-white w-1/5">Hello</div>
</div>