Tutorials


Grid Template Columns and Rows in Tailwind CSS


Grid Template Columns and Rows in Tailwind CSS

Tailwind CSS provides utilities for defining grid template columns and rows using the grid-template-columns and grid-template-rows properties. These utilities allow you to control the size and layout of your grid columns and rows, giving you flexibility in designing grid-based layouts.

1. Grid Template Columns

The grid-cols-{n} utilities define the number of columns in a grid. Tailwind provides several predefined column setups, but you can also create custom column configurations.

Basic Usage

  • grid-cols-1: Creates a single column grid.
  • grid-cols-2: Creates a two-column grid.
  • grid-cols-3: Creates a three-column grid.
  • grid-cols-4: Creates a four-column grid.

Example: Basic Grid Columns

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Columns Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div class="grid grid-cols-3 gap-4">
    <div class="bg-blue-500 text-white p-4">Item 1</div>
    <div class="bg-green-500 text-white p-4">Item 2</div>
    <div class="bg-red-500 text-white p-4">Item 3</div>
  </div>
</body>
</html>

In this example:

  • grid-cols-3: Defines a grid with 3 equal-width columns.
  • gap-4: Adds a 1rem gap between columns.

Custom Column Sizes

You can define custom column sizes using the grid-cols-[value] syntax. This allows for more control over column widths.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Column Sizes</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div class="grid grid-cols-[100px_minmax(200px,_1fr)_auto] gap-4">
    <div class="bg-blue-500 text-white p-4">Item 1</div>
    <div class="bg-green-500 text-white p-4">Item 2</div>
    <div class="bg-red-500 text-white p-4">Item 3</div>
  </div>
</body>
</html>

In this example:

  • grid-cols-[100px_minmax(200px,_1fr)_auto]: Creates a grid with columns of specific sizes: 100px, a flexible column with a minimum of 200px, and an automatic width column.

2. Grid Template Rows

Similarly, grid-rows-{n} utilities define the number of rows in a grid, and you can specify custom row sizes as needed.

Basic Usage

  • grid-rows-1: Creates a single row grid.
  • grid-rows-2: Creates a two-row grid.
  • grid-rows-3: Creates a three-row grid.
  • grid-rows-4: Creates a four-row grid.

Example: Basic Grid Rows

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Rows Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div class="grid grid-rows-3 gap-4 h-screen">
    <div class="bg-blue-500 text-white p-4">Row 1</div>
    <div class="bg-green-500 text-white p-4">Row 2</div>
    <div class="bg-red-500 text-white p-4">Row 3</div>
  </div>
</body>
</html>

In this example:

  • grid-rows-3: Defines a grid with 3 equal-height rows.
  • h-screen: Makes the grid container's height equal to the viewport height.

Custom Row Sizes

Custom row sizes can be defined using the grid-rows-[value] syntax, similar to columns.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Row Sizes</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div class="grid grid-rows-[100px_minmax(200px,_1fr)_auto] gap-4 h-screen">
    <div class="bg-blue-500 text-white p-4">Row 1</div>
    <div class="bg-green-500 text-white p-4">Row 2</div>
    <div class="bg-red-500 text-white p-4">Row 3</div>
  </div>
</body>
</html>

In this example:

  • grid-rows-[100px_minmax(200px,_1fr)_auto]: Creates rows with specific sizes: 100px, a flexible row with a minimum of 200px, and an automatic height row.

3. Grid Template Areas

Tailwind CSS does not provide built-in utilities for defining grid template areas, but you can use custom CSS within Tailwind’s @apply directive to handle named grid areas.

Example: Grid Template Areas

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Template Areas</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
  <style>
    .custom-grid {
      grid-template-areas: "header header header"
                           "sidebar main main"
                           "footer footer footer";
    }
  </style>
</head>
<body>
  <div class="grid custom-grid gap-4 h-screen">
    <div class="bg-blue-500 text-white p-4" style="grid-area: header;">Header</div>
    <div class="bg-green-500 text-white p-4" style="grid-area: sidebar;">Sidebar</div>
    <div class="bg-red-500 text-white p-4" style="grid-area: main;">Main</div>
    <div class="bg-yellow-500 text-white p-4" style="grid-area: footer;">Footer</div>
  </div>
</body>
</html>

In this example:

  • .custom-grid: Custom CSS class with grid-template-areas to define named areas.
  • style="grid-area: header;": Assigns grid areas to items.

Summary

  • Grid Template Columns: Use grid-cols-{n} for predefined columns or grid-cols-[value] for custom sizes.
  • Grid Template Rows: Use grid-rows-{n} for predefined rows or grid-rows-[value] for custom sizes.
  • Grid Template Areas: Use custom CSS for defining grid template areas if needed.


Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about