Menu
Let's suppose I have this 2 by 2 grid layout made with the help of Tailwindcss:
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css" rel="stylesheet"/>
<div class="inline-grid grid-cols-2 grid-rows-2">
<div class="px-1">Full name:</div>
<div class="px-1">Favoutite fruits:</div>
<div class="px-1">John Doe</div>
<div class="px-1">
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
</div>
</div>The problem with the above layout is that the rows are equal in height or, in other words, all the grid items are forced to have the height of the tallest of them.
The items on the first row must have the height required by only a single row of text.
How do I achieve that?
339
You can customize your spacing scale by editing theme.spacing or theme.extend.spacing in your tailwind.config.js file. To customize height separately, use the theme.height section of your tailwind.config.js file. Learn more about customizing the default theme in the theme customization documentation.
Auto-placement by column In this case grid will add items in rows that you have defined using grid-template-rows . When it fills up a column it will move onto the next explicit column, or create a new column track in the implicit grid. As with implicit row tracks, these column tracks will be auto sized.
The default behavior of Grid Auto Flow is to layout the elements by row, working along the row until there are no more slots then moving on to the next row. If a row is not declared then an implicit grid track will be created to hold the items.
Tailwind uses grid-col and grid-row property which is an alternative to the grid-template-columns property in CSS. The grid-template-columns property in CSS is used to set the number of columns and size of the columns of the grid. This class accepts more than one value in tailwind CSS all the properties are covered as in class form.
So you have this options here if you want grid's height to fit content: Set alignment for all items using align-items for grid container (default value is align-items: stretch ). So just set align-items: start for grid-2. Demo: Set alignment for grid items individually using align-self (default value is align-self: stretch ).
By default, Tailwind includes four general purpose grid-auto-rows utilities. You can customize these values by editing theme.gridAutoRows or theme.extend.gridAutoRows in your tailwind.config.js file.
grid-cols- [repeat (auto-fill,minmax (100px… 1. Extend the gridTemplateColumns object in your Tailwind config This will create a grid-cols-auto-fill-100 and grid-cols-auto-fit-100 (but feel free to name them differently in the config!)
Simply remove grid-rows-2. No need to define the rows, defining the columns is enough
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css" rel="stylesheet"/>
<div class="inline-grid grid-cols-2">
<div class="px-1">Full name:</div>
<div class="px-1">Favoutite fruits:</div>
<div class="px-1">John Doe</div>
<div class="px-1">
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
