Building Layouts with Flexbox and Grid

Modern frontend layouts are usually built using Flexbox and CSS Grid. Tailwind provides utility classes for both layout systems, allowing developers to create responsive interfaces quickly without writing custom CSS.

In this chapter, you will build layouts using Tailwind flexbox and grid utilities.

Creating a Flexbox Layout

Open App.svelte and add the following code:

<div class="flex gap-4">
  <div class="bg-purple-200 p-4 rounded-lg">
    Card 1
  </div>

  <div class="bg-purple-200 p-4 rounded-lg">
    Card 2
  </div>

  <div class="bg-purple-200 p-4 rounded-lg">
    Card 3
  </div>
</div>

The flex class enables Flexbox layout, while gap-4 adds spacing between items.

Controlling Alignment

Tailwind includes alignment utilities for positioning content.

<div class="flex justify-between items-center">
  <h2>Dashboard</h2>

  <button class="bg-purple-600 text-white px-4 py-2 rounded-lg">
    Save
  </button>
</div>

• justify-between separates items horizontally;
• items-center aligns items vertically.

These utilities are used constantly in frontend layouts.

Creating a Grid Layout

Tailwind also supports CSS Grid utilities.

<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-200 p-4 rounded-lg">Item 1</div>
  <div class="bg-blue-200 p-4 rounded-lg">Item 2</div>
  <div class="bg-blue-200 p-4 rounded-lg">Item 3</div>
</div>

• grid enables CSS Grid;
• grid-cols-3 creates three columns;
• gap-4 adds spacing between items.

Choosing Between Flexbox and Grid