I don't know how do I explain but I want my grid to perfectly fit this blackboard and even when I change the size of the window it should stay with equal spacing and with their respective hieght and width
this is my code https://play.tailwindcss.com/KBxI7wvDJA
this is how i want
when i reduce the window size it become like this
If you set the container's width, then the grid won't re-size and gaps wont' change.
From the devtools I see the container width as 464px.
So you can apply min-w-[464px] to the container.
Demo: https://play.tailwindcss.com/JXqBPk45Mj
<div class="relative">
<div class="board h-screen"></div>
<-- 👇 -->
<div class="min-w-[464px] grid grid-cols-3 gap-x-28 gap-y-12 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<div class="h-20 w-20 bg-pink-400 text-center"></div>
<div class="h-20 w-20 bg-pink-400 text-center"></div>
<div class="h-20 w-20 bg-pink-400 text-center"></div>
<div class="h-20 w-20 bg-pink-400 text-center"></div>
<div class="h-20 w-20 bg-pink-400 text-center"></div>
<div class="h-20 w-20 bg-pink-400 text-center"></div>
<div class="h-20 w-20 bg-pink-400 text-center"></div>
<div class="h-20 w-20 bg-pink-400 text-center"></div>
<div class="h-20 w-20 bg-pink-400 text-center"></div>
</div>
</div>
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 have the following code:
<div class="grid grid-cols-5 divide-x divide-gray-700 text-center">
<div>Col</div>
<div>Col</div>
<div>Col</div>
<div>Col</div>
<div>Col</div>
</div>
<div class="grid grid-cols-5 gap-4">
<div class="h-20 border bg-gray-300"></div>
<div class="h-20 border bg-gray-300"></div>
<div class="h-20 border bg-gray-300"></div>
<div class="h-20 border bg-gray-300"></div>
<div class="h-20 border bg-gray-300"></div>
</div>
https://play.tailwindcss.com/TLsKEicCOa
That generates this:
How can I make the vertical borders and the boxes align?
Note: I need two grids, I can't just use one.
Since I couldn't solve the issue, I decided to research it for you. Actually, this issue was a problem and it needed to make a few changes. You can find solutions for this issue here. But still I have a short solution for you as follows. If we give a margin to all child elements, there seems to be no problem. As you wish...
<div class="grid grid-cols-5 divide-x divide-gray-700 text-center">
<div>Col</div>
<div>Col</div>
<div>Col</div>
<div>Col</div>
<div>Col</div>
</div>
<div class="grid grid-cols-5 [&>*]:mx-2">
<div class="h-20 border bg-gray-300"></div>
<div class="h-20 border bg-gray-300"></div>
<div class="h-20 border bg-gray-300"></div>
<div class="h-20 border bg-gray-300"></div>
<div class="h-20 border bg-gray-300"></div>
</div>
<script src="https://cdn.tailwindcss.com"></script>
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
styles that need to be implemented
As shown,How to use tailwindcss to achieve the following styles?Many thanks
The styles I implemented are as follows
The styles I implemented, are not correct
<div class="p-4 bg-white shadow flex flex-wrap divide-x divide-y">
<div class="p-4 text-center w-1/3">1</div>
<div class="p-4 text-center w-1/3">1</div>
<div class="p-4 text-center w-1/3">1</div>
<div class="p-4 text-center w-1/3">1</div>
<div class="p-4 text-center w-1/3">1</div>
</div>
Instead of using flex box, you might be better off using CSS grid instead via the grid class. You can then use gap-px to specify a 1px gap between all your grid cells.
To have the colors 1px border, it is just a matter of setting the background color on the parent grid element, e.g. using the bg-gray-200 class.
To get the border radius, you can use rounded-lg. Use overflow-hidden to ensure children elements are properly clipped.
See proof-of-concept below:
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet" />
<!-- Top level div only for display purposes -->
<div class="w-screen h-screen grid place-items-center">
<div class="shadow-xl grid grid-cols-3 gap-px bg-gray-200 rounded-lg overflow-hidden">
<div class="px-16 py-8 bg-white text-center">1</div>
<div class="px-16 py-8 bg-white text-center">2</div>
<div class="px-16 py-8 bg-white text-center">3</div>
<div class="px-16 py-8 bg-white text-center">4</div>
<div class="px-16 py-8 bg-white text-center">5</div>
<div class="px-16 py-8 bg-white text-center">6</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>