I have a grid of cards for service requests. I have not been able to get all cards to simply have the same height. It works fine for the row the largest item is at but the next row height is smaller. How do I have them all the same height?
Code:
https://play.tailwindcss.com/ACR2zkFOeb
Switch auto-rows-max with auto-rows-fr. You can read more about the fr unit here. Here's a StackOverflow answer about a similar scenario with a comprehensive explanation of why it works: link. auto-rows-fr is the same as grid-auto-rows: 1fr as you can see in the documentation.
Tailwind-play with a working example.
Have you tried this?
<div class="grid grid-cols-3 gap-4">
<div class="h-96"></div>
<div class="h-96"></div>
<div class="h-96"></div>
</div>
Related
I am using Bootstrap 5.2, I am using the CSS Grid, because I want to use the gap property.
How do I make the css grid columns auto at larger breakpoint only?
<div class="grid" style="--bs-columns: 10; --bs-gap: 1rem;">
<div class="g-col-5 g-col-lg-auto g-0">
</div>
</div>
of course "g-col-lg-auto" doesn't exist, but hopefully those of you who use bootstrap enough know what I am trying to achieve, and can help me do so. I've read the docs and cannot find the solution.
Thanks
I'm (very) new to Tailwind and have encountered a problem that is driving me crazy. I'm looking to place an image in a footer. At desktop size (1024px), the image needs to sit to the left of the footer content and then on smaller screens, the logo needs to be centered, pretty standard stuff. As with non-tailwind css, I'm using margin to control this and as guided in the documentation, my default setup is in mobile-first so the horizontal margin is set to auto with the following to put the image in the middle with the aim for it to be set to the left when being viewed at a bigger resolution:
<img alt="..." :src="logo" class="mx-auto"/>
The key thing here is mx-auto which centers the image. As per the documentation, I then want to remove the auto-positioning so I add the following to adjust the margin once the screen is at a bigger resolution.
<img alt="..." :src="logo" class="mx-auto lg:mx-0"/>
However, when I run this the image just stays positioned in the center of the element when at full desktop resolution. I've tried using ml-0 just in case there was a problem overriding the original setting but in the inspector, the media query doesn't even attempt to override.
I'm building from a template that does similar things to what I want elsewhere in the project however when I copy that code over, it works until I make a change to the setting (changing a -16 to a -20 etc...) which is also odd. I'm not sure if I've messed something up with my configuration or am just missing something basic but any pointers would be really appreciated.
Just in case its something to do with the container the image is in, here's the wider container:
<div class="container mx-auto px-4">
<div class="flex flex-wrap text-center lg:text-left">
<div class="w-full lg:w-6/12 px-4">
<img alt="..." :src="logo" class="max-w-250-px pb-4 mx-auto lg:mx-0"/>
</div>
</div>
</div>
Maybe something to do with the flex?
It is max-w-[250px] not max-w-250-px
Why not use the flex container you already have to get it done?
What you want is this: https://play.tailwindcss.com/wgHwT7KMJ5
i read a article from here http://victorshi.com/blog/post/How-to-make-a-div-center-in-Bootstrap3 that how to center a div when using bootstrap framework.
their code
<div class="row">
<div class="col-lg-6 col-lg-offset-3 text-center">center</div>
</div>
i just like to know why they use col-lg-offset-3 ? why they did not use col-lg-offset-2 or col-lg-offset-4 etc.
please guide me about the above code sample. thanks
col-lg-6 is a div with width 6 columns (out of 12). The col-lg-offset-3 pushes the div 3 columns to the right. In this case, the row displays a div of half width (6/12 columns) in the center of the div (3/12 pushes 6/12 to the middle).
All of this is documented very well here. I would encourage you to read the documentation and experiment before posting questions to stack overflow in the future.
Its like using margins in this case it adds a dynamic margin-left based on column width.
Using bootstrap, how can we make the height of two columns exactly the same?
For example:
<div class="row">
<div class="col-md-6">
Too much in here
</div>
<div class="col-md-6">
A little here resulting in shorter height
</div>
</div>
All I found through google or other posts asking the same thing here either did not work or if it did, it killed the responsiveness of bootstrap.
For example the flex technique works but it kills the responsive effect of bootstrap.
What is the proper and standard solution for this?
I'm using Fluid 960 at the moment, and I'm getting some weird behavior with alpha/omega. My understanding of alpha/omega is that it's used to fix left/right margins in nested grids.
However, when I apply alpha/omega to a pair of nested grids, the left hand side grid has a really shallow indent while the right hand side grid has a large right-hand side indent (visual observations). Anyone know what's going on?
Its only needed for nested grids eg.
<div class="container_12">
<div class="grid_2">sidebar</div>
<div class="grid_6">
<div class="grid_2 alpha">
1
</div>
<div class="grid_2">
2
</div>
<div class="grid_2 omega">
3
</div>
</div>
<div class="grid_2">photo's</div>
<div class="grid_2">advertisement</div>
</div>
Works as expected now.
I think nested grids won't work in Fluid 960. Widths of grid are defined in term of percentage, instead of exact pixel.
Take previous answer as example, grid_6 will translate to 48% of width, then a grid_2 inside grid_6 will translate to 14.666% * 48%, but the expected of 14.466%.
I am also facing the same problem and may have to revert to non-fluid version. Please suggest if there is a solution or I am wrong.