Published on

Creating a Responsive Grid in Tailwind CSS: Displaying Skills with Ease

Authors
  • Mehdi Akiki avatar
    Name
    Mehdi Akiki
    Twitter

Designing flexible and responsive grid layouts is essential for modern web development. Using Tailwind CSS, you can create beautiful and adaptable grids with minimal effort. In this guide, we’ll build a responsive grid that displays skills (e.g., JavaScript, TypeScript, Golang, etc.) in different ways. Let's dive into creating a grid with two columns and six rows that dynamically adjusts based on screen size.

Building a Basic Grid Layout

To start, we will create a grid layout with two columns and six rows, making a total of 12 grid cells. Here’s how you can create this grid in Tailwind CSS:

<div class="grid grid-cols-2 grid-rows-6 gap-4">
  <div class="bg-blue-200 p-4">JavaScript</div>
  <div class="bg-blue-200 p-4">TypeScript</div>
  <div class="bg-blue-200 p-4">Golang</div>
  <div class="bg-blue-200 p-4">Python</div>
  <div class="bg-blue-200 p-4">Rust</div>
  <div class="bg-blue-200 p-4">Java</div>
  <div class="bg-blue-200 p-4">C++</div>
  <div class="bg-blue-200 p-4">Ruby</div>
  <div class="bg-blue-200 p-4">PHP</div>
  <div class="bg-blue-200 p-4">Swift</div>
  <div class="bg-blue-200 p-4">Kotlin</div>
  <div class="bg-blue-200 p-4">Dart</div>
</div>

Explanation:

  • grid-cols-2 sets up the grid with two columns.
  • grid-rows-6 defines six rows.
  • gap-4 adds spacing between the grid items.

Making the Grid Responsive

To make the grid responsive, you can change the number of columns based on the screen size. For example, we can create a single-column grid on small screens and switch to two or more columns as the screen size increases:

<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
  <div class="bg-green-200 p-4">JavaScript</div>
  <div class="bg-green-200 p-4">TypeScript</div>
  <div class="bg-green-200 p-4">Golang</div>
  <div class="bg-green-200 p-4">Python</div>
  <div class="bg-green-200 p-4">Rust</div>
  <div class="bg-green-200 p-4">Java</div>
  <div class="bg-green-200 p-4">C++</div>
  <div class="bg-green-200 p-4">Ruby</div>
  <div class="bg-green-200 p-4">PHP</div>
  <div class="bg-green-200 p-4">Swift</div>
  <div class="bg-green-200 p-4">Kotlin</div>
  <div class="bg-green-200 p-4">Dart</div>
</div>

Explanation:

  • grid-cols-1 sets one column by default.
  • md:grid-cols-2 switches to two columns on medium screens (768px and above).
  • lg:grid-cols-3 changes to three columns on large screens (1024px and above).

Alternative Layouts for Displaying Skills

To show more creative ways of displaying the skills, let’s explore a couple of variations:

Option 1: Centered Grid with Equal Spacing

<div class="grid grid-cols-2 justify-items-center gap-6 md:grid-cols-4">
  <div class="bg-yellow-200 p-4">JavaScript</div>
  <div class="bg-yellow-200 p-4">TypeScript</div>
  <div class="bg-yellow-200 p-4">Golang</div>
  <div class="bg-yellow-200 p-4">Python</div>
  <div class="bg-yellow-200 p-4">Rust</div>
  <div class="bg-yellow-200 p-4">Java</div>
  <div class="bg-yellow-200 p-4">C++</div>
  <div class="bg-yellow-200 p-4">Ruby</div>
  <div class="bg-yellow-200 p-4">PHP</div>
  <div class="bg-yellow-200 p-4">Swift</div>
  <div class="bg-yellow-200 p-4">Kotlin</div>
  <div class="bg-yellow-200 p-4">Dart</div>
</div>

Option 2: Staggered Layout with Grid Areas

<div class="grid grid-cols-2 gap-4 md:grid-cols-3">
  <div class="col-span-1 bg-red-200 p-4">JavaScript</div>
  <div class="col-span-2 bg-red-200 p-4">TypeScript</div>
  <div class="col-span-1 bg-red-200 p-4">Golang</div>
  <div class="col-span-1 bg-red-200 p-4">Python</div>
  <div class="col-span-2 bg-red-200 p-4">Rust</div>
  <div class="col-span-1 bg-red-200 p-4">Java</div>
</div>

Last Words

Building a responsive grid layout in Tailwind CSS is straightforward, yet it offers immense flexibility. You can customize the number of columns, rows, and gaps and apply responsive design principles to ensure your layout looks great on all devices. Experiment with these examples to display your skills, or adapt them for any content you need to showcase.

I build and scale reliable production systems. Open to full-time and freelance work with U.S.-based teams that value ownership and execution.

Got something in mind?

Book a Discovery Call