I want to let rows intercalate each other, as represented below:
The problem is at the moment I can't intercalate the rows, so I end up having a layout that looks like this:
Or a more real example of what I have:
I tried a lot of ways, including Grid Auto Flow, Inline Grid and also making the child Inline Block but nothing seem to work. From what I inspected each column is as big in height as the one in right, which I don't want.
I can't think of a solution to achieve the desired output using grid layout.
A possible way to do it would be using w-1/2 to set the width of both columns and to absolutely position the second column at the top right corner of the parent. Please check the code snippet below for example.
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class="relative h-full w-full">
<div class="w-1/2">
<div class="w-full h-20 bg-blue-400"></div>
<div class="w-full h-10 bg-yellow-400"></div>
<div class="w-full h-36 bg-red-400"></div>
</div>
<div class="absolute right-0 top-0 w-1/2">
<div class="w-full h-40 bg-green-400"></div>
<div class="w-full h-36 bg-indigo-400"></div>
</div>
</div>
Related
I'm making a website using react and tailwind. I want to add a vertical scrollbar to a list in a section of my page, but when I do, the bullets disappear. Why is this happening?
<ul className="list-disc overflow-y-auto h-80 space-y-3 text-sm w-full sm:text-md items-start">
{experience.points.map((point, i) => (
<li key={i}>{point}</li>
))}
</ul>
I've tried using overflow-y-scroll instead but it has the same effect. I've also tried adjusting the margins of the list container but that doesn't work either. The bullets appear when I don't use any overflow utility. For now, I've just added them to each list-item string manually but I'm curious as to why this would happen.
what you are missing is the css rule that sets the counter inside or outside
in tailwind 3 it's the class list-inside
plain css: list-style-position: inside;
being it set outside by default, setting the overflow cuts them out
Try this -
<ul className="list-disc overflow-auto h-80 space-y-3 text-sm w-full sm:text-md items-start p-2">
{experience.points.map((point, i) => (
<li key={i} className='list-disc p-2'>{point}</li>
))}
</ul>
<div class="flex overflow-y-auto">
<div class="w-1/2 bg-red-500 ">w-first</div>
<div class="w-1/2 bg-blue-500">w-second</div>
<div class="w-1/2 bg-green-500">w-third</div>
<div class="w-1/2 bg-yellow-500">w-fourth</div>
</div>
I wants 2 div per row, i can use a div wrap to (first, second) div, then use w-1/2 that times it works fine.
but if i have unlimited div its not possible to wrap all div in same time.
It looks like a perfect scenario for the grid layout.
While flex is designed for one-dimensional layouts, for a two-dimensional layout like the one you have, grid would be a better fit.
Switch the flex utility with the grid utility. Then, specify the number of columns by using grid-cols-2. This utility will limit the number of elements of each row to 2.
You can read more about the grid-cols-{n} utility here.
<div class="grid grid-cols-2 overflow-y-auto">
<div class="bg-red-500">w-first</div>
<div class="bg-blue-500">w-second</div>
<div class="bg-green-500">w-third</div>
<div class="bg-yellow-500">w-fourth</div>
</div>
Tailwind-Play
Hi All,
I am looking for a responsive way using TailwindCSS to bind the outer card component to the viewport.
I've tried w-screen and h-screen, however they don't ensure that the card component remains in view across differing window sizes.
I want to get rid of the white space around the card.
Any suggestions are much appreciated.
Thanks,
Brandon
import BlogPost from './BlogPost';
const CardDisplay = () => {
return (
<div class="object-cover w-screen relative bg-white rounded-xl shadow-md overscroll-contain overflow-hidden ">
<div class="md:flex">
<div class="lg:shrink-0">
<img class="h-full w-full object-cover md:h-full md:w-64" src="/img/store.jpg" alt="Man looking at item at a store"></img>
</div>
<div class="p-32">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
<BlogPost/>
<BlogPost/>
<BlogPost/>
</div>
</div>
</div>
)
}
export default CardDisplay;
I am trying to position an image over image. Basically I want the image to fit correctly at the chest area position on the hoodie, but it's not coming out properly. How do I do it in a clean way that is responsive as well?
My code:
<div className="basis-1/2">
<div className="max-w-lg container mx-auto">
<img className="w-full" src={`${router.basePath}/assets/images/Hoodie black label.jpg`} alt="Empty Hoodie"/>
<div className="place-items-center">
<img className="w-1/6 absolute top-1/3 right 1/4 place-items-center h-40 w-40" src={urlvalue} alt="Picked NFT to Print"/>
</div>
</div>
</div>
Thanks in advance!
You can overlay an image over another like this,
<script src="https://cdn.tailwindcss.com"></script>
<div class="relative mix-blend-lighten">
<img src="https://m.media-amazon.com/images/I/61ktWbf0z4L._UX679_.jpg" alt="BannerImage" class="absolute h-[] w-full object-cover object-right " />
<img src="http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back04.jpg" alt="BannerImage" class="absolute h-[20vh] w-[30vh] object-cover object-right mx-44 mt-44 sm:mx-72 sm:mt-72" />
</div>
But since both the image had absolute position, then you have to add different margins for the upper image for each screen breakpoints, so that it lies always on chest area of hoodie image.
I am using React With Tailwind
I need to Apply same Gradient to Navbar as well as Sidebar
but applying gradient on both give different flow.
Please give me solution!
<navbar className="flex h-16 w-full bg-gradient-to-r from-gray-800 to-blue-800 justify-center"></navbar>
<sidebar className='flex absolute h-full w-1/4 bg-gradient-to-r from-gray-800 to-blue-800'></sidebar>
If you can make sure your navbar is 100vw, then you can add Pseudo-element to the sidebar and add gradient background to it. If there is a vertical scrollbar, it may shift the gradient a bit. You can apply the same trick to the navbar to avoid this behavior, but overflow:hidden may affect some overflow element like menu dropdown. In this case, you may nest another full width, height, absolute div then add Pseudo-element into it in your navbar.
<div className="flex h-16 w-full justify-center bg-gradient-to-r from-gray-800 to-blue-800 overflow-y-scroll"></div>
<div className="relative flex h-full w-1/4 overflow-hidden from-gray-800 to-blue-800 before:h-full before:absolute before:w-screen before:bg-gradient-to-r before:content-[''] before:-z-10"></div>
Code can be found here