I have a div with 5 child divs. There is no content, it's just there to visually display a percentage. I have set a width and height on the parent and I want to find the easiest way to make the children equally fill that width. I can do this by adding flex-grow to each child but ideally I'd love to be able to control that from the parent.
NB: Code is using tailwindcss
<div class="flex w-64 h-2">
<div class="flex-grow mr-1 rounded-l-lg bg-blue-dark"></div>
<div class="flex-grow mr-1 bg-blue-dark"></div>
<div class="flex-grow mr-1 bg-blue-dark"></div>
<div class="flex-grow mr-1 bg-blue-dark"></div>
<div class="flex-grow rounded-r-lg bg-gray-lighter"></div>
</div>
You have "flexbox" in title but you did not mentioned in question that you actually you are forced to use flexboxes, just need to achieve equal divs.
So the best approach will be using grid instead of flex, because it is just designed for that.
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div class="grid grid-flow-col w-64 h-2">
<div class="bg-blue-500"></div>
<div class="bg-red-500"></div>
<div class="bg-green-500"></div>
<div class="bg-orange-500"></div>
<div class="bg-gray-500"></div>
</div>
Related
I am trying to achieve a grid layout using Tailwind, but I have troubles of implementing it.
I thought at first to use flex but I think that would be difficult to achieve.
So far I am using grid grid-cols-3 gap-4 and it looks like the picture below, but I want the chart status to be below the X-as and Lijen, bottom to be databak, algemeen and data/filters.
<div className="h-full grid grid-flow-col-dense col-span-3 gap-4">
<div className="row-span-3">
1
</div>
<div className="col-span-2">
2
</div>
<div className="row-span-2 h-full col-span-2">
3
</div>
</div>
I cannot make the 3 element get the remaining height..
Take a look at this: https://tailwindcss.com/docs/grid-column
Basically, you want to span your cols.
<div class="grid grid-cols-3 gap-4">
<div class="...">01</div>
<div class="...">02</div>
<div class="...">03</div>
<div class="col-span-2 ...">04</div>
<div class="...">05</div>
<div class="...">06</div>
<div class="col-span-2 ...">07</div>
</div>
And you can do the same for the rows, so you can get Chart status in the same col under leien.
<div class="grid grid-rows-3 grid-flow-col gap-4">
<div class="row-span-3 ...">01</div>
<div class="col-span-2 ...">02</div>
<div class="row-span-2 col-span-2 ...">03</div>
</div>
Have you tried to just change the order of the items in the HTML?
If you're using for example a 12x12 grid you could also specify for each items the exact row/column you want it to span:
.grid-item-1 {
grid-column:2/4;
}
You could also try flex - it does have the "order" property:
.flex-item-1 {
order: 1;
}
It's not such a complex layout so you could try flex too.
Changed the height of the flexbox (h-40) and set the image height to full (h-full). In this case the height of the image changes and fills the entire container, keeps the aspect ratio which is good and expected.
But the container div (with blue background) does not change in width, just in height.
How can I make this div to be as same width as the image?
https://codepen.io/lordjancso/pen/eYKOVRN
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-row justify-around h-40">
<div class="bg-blue-700">
<img class="h-full" src="https://picsum.photos/500/700">
</div>
<div class="bg-blue-700">
<img class="h-full" src="https://picsum.photos/500/700">
</div>
</div>
Apply the w-fit utility on the images' container. w-fit, which is the width: fit-content; class in CSS, will use the available space, but never more than max-content.
<div class="flex flex-row justify-around h-40 w-fit">
<div class="bg-blue-700">
<img class="h-full" src="https://picsum.photos/500/700">
</div>
<div class="bg-blue-700">
<img class="h-full" src="https://picsum.photos/500/700">
</div>
</div>
Tailwind-play
I have a block:
<div class="height: 400px; padding-left: 20px"></div>
How to make vertical line on the left side of block using tailwind?
I try to achive this:
I'm not sure if I understand your question well, but need to read tailwind docs to understand how tailwind works, so here is what I did I hope it's what you are looking for :
<script src="https://cdn.tailwindcss.com"></script>
<div class='h-screen w-screen'>
<div class="h-[400px] bg-green-300 w-[20px]"></div>
</div>
You can do it with to divs. You have to use flex box (flex) system to align the to divs next to each other. Then you can set the height h-[400] and the padding pl-[20]. pl-* means padding-left.
example
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex h-[400px] p-2">
<div class="bg-blue-700 w-1"></div>
<div class="pl-[20px]">Hello</div>
</div>
height:auto;
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex h-auto p-2">
<div class="bg-blue-700 w-1"></div>
<div class="pl-[20px]">Hello</div>
</div>
I have a simple flex div with many children. I want 3 elements on each row using tailwindcss.
Is there a way to accomplish this using just tailwindcss classes? I tried with gap-4 on my parent div and child elements with w-1/3, but it adds margin to the children elements, breaking the row after the second element:
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.7/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-wrap gap-4 mb-6">
<div class="w-1/3 shadow border rounded p-4">
My element
</div>
<div class="w-1/3 shadow border rounded p-4">
My element
</div>
<div class="w-1/3 shadow border rounded p-4">
My element
</div>
<div class="w-1/3 shadow border rounded p-4">
My element
</div>
</div>
How can I add a gap between the child elements, breaking the line only after every third element (in short: I want a 3 column div)?
This is a grid job
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.7/tailwind.min.css" rel="stylesheet"/>
<div class="grid-cols-3 grid gap-4 mb-6">
<div class="shadow border rounded p-4">
My element
</div>
<div class="shadow border rounded p-4">
My element
</div>
<div class="shadow border rounded p-4">
My element
</div>
<div class="shadow border rounded p-4">
My element
</div>
</div>
You also can use the space between utility space-x-{amount} if you want to keep using flex instead of grid:
<div class="flex space-x-4 ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
More details here
I want to have a image at left and at right some information. This information div at right have a orange border around. And I want that this information area occupies the same height of the image. So i created a div .details with display flex and align-items stretch. But its not working, the image and the information area dont occupy the same width. Do you know why?
example: https://jsfiddle.net/wjvwovy2/
html:
<div class="container py-4">
<div class="row">
<div class="details">
<div class="col-8 px-0" style="background-color: red">
<img style="width: 100%" src="http://via.placeholder.com/700x350"/>
</div>
<div class="col-4 px-0">
<div class="details-title d-flex flex-column align-items-start">
<span class="font-size-sm font-weight-semi-bold">Date</span>
<h1 class="h5 font-weight-bold">Title</h1>
<span class="details-title-subtitle font-size-sm font-weight-bold">Subtitle</span>
Subtitle2
</div>
</div>
</div>
</div>
</div>
This is because you have applied the visual styles in a descendant which is not a direct child of the .details element. There are several ways to fix this, depending on what you are trying to achieve.
A quick one is to apply d-flex class in <div class="col-4 px-0"> and flex-grow: 1 in <div class="details-title d-flex flex-column align-items-start">.
https://jsfiddle.net/todorito/32ukpemr/1/
In your fiddle it's just the closing bracket of details-title in the CSS which is missing:
https://jsfiddle.net/468p5rj7/2/