Calmcode - tailwind: grids

Tailwind Grids

1 2 3 4 5 6 7

Prev Video

Next Video

Consider the following HTML page with all the attached tailwind classes.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 bg-slate-200 m-4">
    <div class="bg-slate-400 hover:bg-slate-600">01</div>
    <div class="bg-slate-400 hover:bg-slate-600">02</div>
    <div class="bg-slate-400 hover:bg-slate-600">03</div>
    <div class="bg-slate-400 hover:bg-slate-600">04</div>
    <div class="bg-slate-400 hover:bg-slate-600">05</div>
    <div class="bg-slate-400 hover:bg-slate-600">06</div>
  </div>
</body>
</html>

Notice how the first <div> has the grid grid-cols-2 md:grid-cols-4 gap-4 classes. These classes are used to create a grid layout. The grid class is used to set the display property to grid, which tells tailwind to assume that the contents need to be in a grid format.

There are many grid formats possible, which is why we also provide the grid-cols-2 class. This tells tailwind that we want a columnar grid and that there are two columns in total. The md:grid-cols-4 class is used to set the number of columns to 4 on medium screens and above. This is a nice combination of classes that allows you to create a responsive grid layout. The main layout of the calmcode website uses a very similar design system for all the course cards.

The gap-4 class is used to set the gap between the columns to 4. If you want more or less space you can configure this by changing the number here.