Sizing

I don't know if you've noticed, but when we moved our cards to external divs serving as columns in the grid, they stopped having the same height.

This is how it looked when the cards served as columns at the same time:

By default, the card's height is defined by its content (that is, the card's height will adjust to the amount of content you add to it) so this is what it looks like now that we've moved the columns to the outer divs:

This is because only elements that are direct children of the grid have their height set to 100%.

And if we add the .bg-red-500 class to the columns to make them visible, we see that they are actually still stretched to their full available height and are equal to each other.

It would be good to make the cards still the same height. This is a good opportunity to talk about sizing utilities.

Width

Width is controlled using the w prefix followed by a unit or value.

The pattern continues up to .w-96 for 24rem, and then there are some specific larger sizes:

.w-1
.w-2
.w-3
.w-4
.w-6
.w-8
.w-10

Relative to the parent

However, the most useful are relative sizes, where we can set the height or width relative to the parent:

width 100%
width 50%
width 33.33333%
width 66.66667%
width 25%
width 75%

Height

Height works the same way as width, but instead of w we use h prefix

Step 1 - set cards to full height

Let's set the cards to full height. We'll do this by adding the h-full class to the divs with our pricing cards.

Do the same with the other two cards and after saving the file, you should see that the cards are now the same height.

Demo and source code for this lesson
Prev Next
John Doe

About author

Michal Szymanski
@ascensus_mdb

Co Founder at TW Elements and MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.