From the course: Tailwind CSS 4 Essential Training

Unlock this course with a free trial

Join today to access over 24,800 courses taught by industry experts.

Creating grid layouts

Creating grid layouts - Tailwind CSS Tutorial

From the course: Tailwind CSS 4 Essential Training

Start my 1-month free trial Buy for my team

Creating grid layouts

“

- [Instructor] Let's look at creating grid layouts using Tailwind CSS. I have a set of eight logos here. Each image individually is restricted to a max height and a max width, so that's also something you could do with Tailwind. Just set the prefix max to a height or a width utility class, and you get the max height or the max width CSS property. All right, now let's display these logos in a grid fashion. We have to make the parent dev a grid container for that using the utility class, grid, and also specify the number of columns that we need using grid-cols followed by the number. So you will see auto suggestions for creating columns from 1 to 12, but in reality, you can add any number above 12 also from version four onwards. So now let me set this to grid-cols-4, and this will give us four equal-sized columns. No matter what the content is within, it will always give you equal columns. You can change it to grid-cols-2 or grid-cols-3 to see that they are equally sized. Actually, you…

Contents