I would like to create a grid with tailwind css where the first column is very narrow and the second one is very wide. Normally I find the tailwind docs very intuitive but I'm not understanding this one. Using grid-cols-{n} I can create equally sized columns but I don't understand how to make differently sized columns. How can I go about this?
If you want create columns with different widths then it will be an implicitly-created grid.
<div class="p-5 bg-slate-200">
<div class="grid grid-flow-col auto-cols-max gap-x-5">
<div class="bg-white w-20">Hello 1</div>
<div class="bg-white w-40">Hello 2</div>
<div class="bg-white">Hello 3</div>
</div>
</div>
https://play.tailwindcss.com/7XjBZDzwml
This is the relevant documentation here:
https://tailwindcss.com/docs/grid-auto-columns
And it explains how you can customize your theme if needed too.
Here's an example of a 2 column grid where the first column is narrow, and the second one is not:
<div class="grid grid-cols-[max-content_1fr] gap-x-4">
<div class="bg-red-200 p-4">Column 1</div>
<div class="bg-green-200 p-4">Column 2</div>
</div>
Tailwind play: https://play.tailwindcss.com/FTLi83L5zI
I'll assume that's not what you want as it's not 100% clear from your question. So here's a different example using a 12 column grid, you can span multiple columns to achieve something along the lines of what you are asking for:
<div class="grid grid-cols-12 gap-x-4 text-center">
<div class="bg-slate-400 p-4">Col</div>
<div class="bg-slate-400 p-4 col-span-2">Col</div>
<div class="bg-slate-400 p-4">Col</div>
<div class="bg-slate-400 p-4">Col</div>
<div class="bg-slate-400 p-4">Col</div>
<div class="bg-slate-400 p-4 col-span-4">Col</div>
<div class="bg-slate-400 p-4">Col</div>
<div class="bg-slate-400 p-4">Col</div>
</div>
Tailwind play: https://play.tailwindcss.com/XtUOu2cDD9
Finally, you could also do this:
<div class="grid grid-cols-12 gap-x-4 text-center">
<div class="bg-slate-400 p-4 col-span-4">Col</div>
<div class="bg-slate-400 p-4 col-span-8">Col</div>
</div>
Tailwind play: https://play.tailwindcss.com/bAnPhCdNfc
In the end the way I did it was:
grid grid-cols-[2rem,8fr]
Which creates a grid with 2 columns one, the first one 2rems wide the second one being 8fr wide
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 using Tailwind CSS and am trying to build a grid that certain cell contents span multiple cells while other items stay in the single cell. In the code below, I try to show what I am trying to accomplish. I know my col-span-2 class is not doing anything, but I put it there to indicate what I wish I could do. I want all cells to be the same width (I just want some cell content to span over the dividers). Do I need some sort of overlay logic?
Any help is appreciated.
Thanks!
<div id=container class="m-auto p-2">
<div id=theGrid class="grid grid-cols-3 divide-x divide-gray-600">
<div id=cell1 class="px-4 h-24">
Cell 1<br />
<div id=thingThatSpansTwoCells class="h-4 bg-green-700 text-white col-span-2">Spans 2 Cells</div>
</div>
<div id=cell2 class="px-4 h-24">Cell 2</div>
<div id=cell3 class="px-4 h-24">Cell 3</div>
</div>
</div>
You will need to write your own CSS for this. To span 2 column, use width:200% and don't forget to account for the padding you are using:
.w-200 {
width:calc(200% + 3rem);
}
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div id=container class="m-auto p-2">
<div id=theGrid class="grid grid-cols-3 divide-x divide-gray-600">
<div id=cell1 class="px-4 h-24">
Cell 1<br />
<div id=thingThatSpansTwoCells class="bg-green-700 text-white w-200">Spans 2 Cells</div>
</div>
<div id=cell2 class="px-4 h-24">Cell 2</div>
<div id=cell3 class="px-4 h-24">Cell 3</div>
</div>
</div>
In bootstrap grid, i am unable to get the desired outcome. I have four divs with classes col-sm-3 and as per rule all 4 should display in one line as it is 12 column layout. But it's not. I have also attached the screenshots
Already tried other breakpoints too like xs and md
<div class="testing container">
<div class="row">
<div class="box1 justify-content-center col-xs-3 col-lg-6">BOX 1</div>
<div class="box2 col-xs-3 col-lg-6">BOX 2</div>
<div class="box3 col-xs-3 col-lg-6">BOX 3</div>
<div class="box4 col-xs-3 col-lg-6">BOX 4</div>
</div>
</div>
In mobile devices all boxes should be in one line
Bootstrap 4 has changed its col-xs class it is now just col- and then the size of the column you want for example:
col-1 col-2 col-3
Note that col-smm col-md and col-lg still work in the way they did in bootstrap 3
Don't use xs in BS4. use sm for anything under 576px.
<div class="testing container">
<div class="row">
<div class="box1 justify-content-center col-3 col-sm-6">BOX 1</div>
<div class="box2 col-3 col-sm-6">BOX 2</div>
<div class="box3 col-3 col-sm-6">BOX 3</div>
<div class="box4 col-3 col-sm-6">BOX 4</div>
</div>
</div>
I'm faced two issues
col-6 center text what should we do in order change to center,need change to row?
when the size is small, how to set image and text always at bottom
<div class="container-fluid ">
<div class="col-md-6 ser-first-grid text-center">
<img src="https://www.picwallz.com/wp-content/uploads/2017/02/wallpaper-landscap-sunrise-nature-view-hd-photos-famous-on-high-quality-for-pc.jpg" />
</div>
<div class="col-md-6 ser-first-grid text-center">
<h3>PRODUCT SOURCING</h3>
<p>We assist clients in sourcing suppliers to meet specific product requirements.</p>
</div>
</div>
<div class="container-fluid">
<div class="col-md-6 ser-first-grid text-center">
<h3>DESIGN DEVELOPMENT</h3>
<p>MALCORP possesses the capacity to design specific and specialized products to meet the most discerning of customer requirements.</p>
</div>
<div class="col-md-6 ser-first-grid text-center">
<img src="https://www.picwallz.com/wp-content/uploads/2017/02/wallpaper-landscap-sunrise-nature-view-hd-photos-famous-on-high-quality-for-pc.jpg" />
</div>
</div>
Check this jsfiddle out link
Use bootstrap flex-order here for responsive ordering of columns.More info Bootstrap flex-order
Add this class order-md-1 on second column and order-md-2 on first column.
As for the centering part, a text-center class on column should've worked.
Also you must put your columns inside rows.
having trouble with laying out a fluid column layout in bootstrap 3.
the structure of the HTML elements looks like this:
div.container-fluid
div.row.upperrow
div.row.contentrow
div.col-lg-3
div.col-lg-1
div.col-lg-5
div.col-lg-3
even the first 3 divs, which only add up to 9/12 of the 12-column layout, are much wider than the page. the div.col-lg-5 easily takes up 70% of the row (not 5/12). the div.col-lg-3 is pushed under the first 3 divs as they are too wide.
what could be the problem here?
As stated at http://getbootstrap.com/css/:
Content should be placed within columns, and only columns may be immediate children of rows.
Your layout has a row as child from another row. Put another col-12 in between or remove one row.
Look at this fiddle. Here is how it works.
<div class="container-fluid">
<div class="row">
<p class="text-center">Here is a row</p>
</div><br/>
<div class="row">
<div class="col-3 col-sm-3 col-lg-3 col">Col 3</div>
<div class="col-2 col-sm-1 col-lg-2 col">Col 2</div>
<div class="col-4 col-sm-5 col-lg-4 col">Col 4</div>
<div class="col-3 col-sm-3 col-lg-3 col">Col 3</div>
</div>
</diV>