I have a grid layout set-up with windicss with this code
<div class="grid grid-cols-2 w-auto">
<div class="w-15">
<img class="h-15" src="https://starnumber.tk/logo.png" alt="logo">
</div>
<div>
<p class="text-left font-mono"><span class="text-xl">StarNumber12046</span><br>Svelte lover</p>
</div>
but the div takes too much space
Apparently, setting the display to an inline-flex fixes the problem.
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.
I am trying to have the same space (and configurable) before and after the divider line. However I cannot seem to get the spacing after the divider line.
<div class="grid grid-cols-1 divide-y divide-solid">
<div class="pb-5">Hello</div>
<div class="pb-5">World</div>
<div class="pb-5">hi</div>
</div>
It looks like this:
How can I get the same spacing before and after the divider line? Ideally without needing to touch the children styles (i.e. remove the pb-#)?
Try this code,
<div class="grid grid-cols-1 divide-y divide-solid bg-gray-500">
<div class="py-2 first:pt-0">Hello</div>
<div class="py-2">World</div>
<div class=" py-2 last:pb-0">hi</div>
</div>
credits: #brc-dd sample
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>
I'm using .h-75 from Bootstrap to resize an image relative to its parent div. On Firefox resizing works, but on Chrome it seems to ignore it.
I tried adding object-fit:cover but it didn't work.
<div class="container d-flex flex-column min-vh-100">
<div>
Some objects
</div>
<div class="mb-3" style="max-height: 50vh;">
<img src="./img/mmm.png" class="d-none d-sm-inline h-75">
<p class="mt-1 lead">some text</p>
</div>
<div>
Some objects
</div>
</div>
I'd like chrome to dynamically resize the image when I reduce the viewport the same way firefox does it.
Solution: ->
Insted of using h-75 class, you can try img-fluid class to <img> tag...it adjust automatically according to viewport.
<div class="container d-flex flex-column min-vh-100">
<div>
Some objects
</div>
<div class="mb-3" style="max-height: 50vh;">
<img src="./img/mmm.png" class="d-none d-sm-inline img-fluid">
<p class="mt-1 lead">some text</p>
</div>
<div>
Some objects
</div>
</div>
You can try this...
Solution: ->
If you adding max-height on parent div 50vh... So you have to add height same as max-height..
Here is the code...
<div class="container d-flex flex-column min-vh-100">
<div>
Some objects
</div>
<div class="mb-3" style="max-height: 50vh; height: 50vh">
<img src="https://yt3.ggpht.com/a/AGF-l7-BBIcC888A2qYc3rB44rST01IEYDG3uzbU_A=s900-mo-c-c0xffffffff-rj-k-no" class="d-none d-sm-inline h-75 img-responsive">
<p class="mt-1 lead">some text</p>
</div>
<div>
Some objects
</div>
</div>
I tried on both browsers Firefox and chrome...
In the end I got the intended behavior by chnaging from mex-heigh vh, to just vh.
I am trying to add a padding-bottom to an div class="col-md-4" directly without using css. Is it possible?
I tried this code
<div class="col-md-4 padding-bottom:15px">
also
<div class="col-md-4" "padding-bottom:15px">
full content code is
<div class="gal">
<div class="container">
<div class="col-md-12 no-padding">
<div class="row">
<div class="grid clearfix">
#foreach($albums as $album)
<div class="col-md-4">
<figure class="effect-julia"> <img src="{{$album->gallery->imageUrl(null,300,239)}}" alt="czcsdcsd -{{$album->name}}"/>
<figcaption>
<h2>{{$album->name}}</h2>
<div>
<p>View More</p>
</div>
View more </figcaption>
</figure>
</div>
#endforeach
</div>
</div>
</div>
</div>
</div>
it does not change anything.please help
<div class="col-md-4" style="padding-bottom:15px"></div>
Just use the attribute style, but I have to say using CSS in the HTML directly is not the best way...
Also, you can use bs4 classes like pb-number for setting padding-bottom, or pt-number for setting padding-top where number is number from 0 to 5 (or auto) which is equivalent to values in rem from .25rem to 3rem.
In your case, you can use class="pb-1" for example.
You can find out more in the official documentation of bootstrap4: