Grid

Now the cards. In the CSS course, you arranged cards in a grid with display: grid and grid-template-columns. In Tailwind, the grid is switched on by the class grid, and the columns are set by the classes grid-cols-*:

.grid {
	display: grid;
}

.grid-cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

The number in the class is the number of columns: grid-cols-3 makes three, grid-cols-4 four, and so on; any number works. The columns are always equally wide. Each one gets one share of the space (1fr, as you know), and minmax(0, 1fr) means that a column may get narrower than its content: a long word in one card can't make its column wider than the others.

The gaps between the rows and the columns are set by the same classes as in flexbox: gap-*, or separately gap-x-* and gap-y-*.

Do you need columns of different widths? Write them in square brackets, like the arbitrary values you know (w-[350px]), with an underscore instead of each space: grid-cols-[12rem_1fr] makes a column 12rem wide and a second one that takes the rest.