DesignCools

CSS Grid in tailwind

—

by

designcools
in

CSS Grid Layout revolutionizes web design by providing a two-dimensional layout system. It allows developers to create intricate designs with ease, controlling both rows and columns simultaneously.

What is CSS Grid?

CSS Grid is a layout system designed to divide a webpage into rows and columns, providing flexibility for responsive and dynamic designs. Unlike Flexbox, which focuses on a one-dimensional flow (either row or column), CSS Grid excels in two-dimensional layouts, allowing items to be placed across both axes simultaneously.

Getting Started with CSS Grid in Tailwind CSS

To use CSS Grid in Tailwind, you define a container as a grid by using the grid class. Child elements inside this container will automatically become grid items.

Preview

Item 1
Item 2
Item 3

Show Code

<div class="grid">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Defining the Number of Columns and Rows

The number of columns and rows in a grid can be set using the grid-cols-{n} and grid-rows-{n} utilities, where n is the number of columns or rows.

Defining Columns

  • grid-cols-1: One column.
  • grid-cols-2: Two columns.
  • grid-cols-3: Three columns.
  • Up to grid-cols-12

Preview

1
2
3

Show Code

<div class="grid grid-cols-3 gap-4">
    <div class="bg-blue-500">1</div>
    <div class="bg-red-500">2</div>
    <div class="bg-green-500">3</div>
</div>

Defining Rows

  • grid-rows-1: One row.
  • grid-rows-2: Two rows.
  • grid-rows-3: Three rows.

Preview

1
2
3

Show Code

<div class="grid grid-rows-2 gap-4">
  <div class="bg-blue-500">1</div>
  <div class="bg-red-500">2</div>
  <div class="bg-green-500">3</div>
</div>

Span Utilities

Span utilities allow grid items to occupy multiple columns or rows.

Column Span

  • col-span-{n}: Span n columns

Preview

Span 2
1
2

Show Code

<div class="grid grid-cols-4 gap-4">
  <div class="col-span-2 bg-blue-500">Span 2</div>
  <div class="bg-red-500">1</div>
  <div class="bg-green-500">2</div>
</div>

Row Span

  • row-span-{n}: Span n rows

Preview

Span 2 Rows
1
2

Show Code

<div class="grid grid-rows-3 gap-4">
  <div class="row-span-2 bg-blue-500">Span 2 Rows</div>
  <div class="bg-red-500">1</div>
  <div class="bg-green-500">2</div>
</div>

Advanced Grid Placement

Tailwind offers utilities for advanced grid item placement.

Start and End Positions

  • col-start-{n}: Start a column at position n.
  • col-end-{n}: End a column at position n.
  • row-start-{n}: Start a row at position n.
  • row-end-{n}: End a row at position n

Preview

Span Columns 2 to 4
1
2

Show Code

<div class="grid grid-cols-4 gap-4">
  <div class="col-start-2 col-end-4 bg-blue-500">Span Columns 2 to 4</div>
  <div class="bg-red-500">1</div>
  <div class="bg-green-500">2</div>
</div>

Auto-Fitting and Auto-Filling

Tailwind allows for responsive grids with dynamic column sizing using grid-cols-[auto-fit] or grid-cols-[auto-fill].

Auto-Fitting

The auto-fit keyword fits items into the grid, expanding or collapsing based on available space

Preview

Item 1
Item 2
Item 3

Show Code

<div class="grid grid-cols-[auto-fit] gap-4">
  <div class="bg-blue-500">Item 1</div>
  <div class="bg-red-500">Item 2</div>
  <div class="bg-green-500">Item 3</div>
</div>

Auto-Filling

The auto-fill keyword fills the grid with as many items as possible, even if some grid cells remain empty

Preview

Item 1
Item 2

Show Code

<div class="grid grid-cols-[auto-fill] gap-4">
  <div class="bg-blue-500">Item 1</div>
  <div class="bg-red-500">Item 2</div>
</div>