Tailwind Grid

The Tailwind grid utility class allows you to create grid-based layouts quickly and easily.

Tailwind grid

The tailwind grid utility class allows you to create grid-based layouts quickly and easily. It provides a set of classes that enable you to define grid containers, grid columns, and grid rows, allowing you to create responsive and flexible grid layouts for your web applications.

Setting a Tailwind grid Container

To create a tailwind grid container, you can use the grid class. This class sets the display property of the element to grid and enables grid behavior. By default, the grid container has a single implicit grid track in each direction.

html

<div class="grid">
  <div class=" ">A</div>
  <div class=" ">B</div>
  <div class="...">C</div>
  <div class=" ">D</div>
  <div class=" ">E</div>
  <div class="...">F</div>
</div>

Preview

Tailwing Grid Rows

To define the tailwind grid rows within a grid container, you can use the grid-rows-{n} class, where {n} is the number of desired rows. This class evenly distributes the available space among the specified number of rows.

html

<div class="grid grid-rows-3">
  <div class=" ">A</div>
  <div class=" ">B</div>
  <div class="...">C</div>
  <div class=" ">D</div>
  <div class=" ">E</div>
  <div class="...">F</div>
</div>

Preview

Tailwind Grid columns

To define the tailwind grid columns within a grid container, you can use the grid-cols-{n} class, where {n} is the number of desired columns. This class evenly distributes the available space among the specified number of columns

html

<div class="grid grid-cols-3">
  <div class=" ">A</div>
  <div class=" ">B</div>
  <div class="...">C</div>
  <div class=" ">D</div>
  <div class=" ">E</div>
  <div class="...">F</div>
</div>

Preview

Responsive Tailwind Grid

Tailwind CSS provides responsive utility classes for creating grids, allowing you to define different grid layouts at different breakpoints. To use responsive tailwind grid classes, you can append the breakpoint prefix to the grid classes. For example, md:grid-cols-2 sets the number of grid columns to 2 starting from the medium breakpoint and above.

html

<div class="grid grid-cols-2 md:grid-cols-4">
  <div class=" ">A</div>
  <div class=" ">B</div>
  <div class="...">C</div>
  <div class=" ">D</div>
  <div class=" ">E</div>
  <div class="...">F</div>
</div>

Tailwind Grid Column Class Table

Class	Properties
grid-cols-1	grid-template-columns: repeat(1, minmax(0, 1fr))
grid-cols-2	grid-cols-2 grid-template-columns: repeat(2, minmax(0, 1fr))
grid-cols-3	grid-template-columns: repeat(3, minmax(0, 1fr));
grid-cols-4	grid-template-columns: repeat(4, minmax(0, 1fr));
grid-cols-5	grid-template-columns: repeat(5, minmax(0, 1fr));
grid-cols-6	grid-template-columns: repeat(6, minmax(0, 1fr));
grid-cols-7	grid-template-columns: repeat(7, minmax(0, 1fr));
grid-cols-8	grid-template-columns: repeat(8, minmax(0, 1fr));
grid-cols-9	grid-template-columns: repeat(9, minmax(0, 1fr));
grid-cols-10	grid-template-columns: repeat(10, minmax(0, 1fr));
grid-cols-11	grid-template-columns: repeat(11, minmax(0, 1fr));
grid-cols-12	grid-template-columns: repeat(12, minmax(0, 1fr));
grid-cols-none	grid-template-columns: none;
grid-cols-subgrid	grid-template-columns: subgrid;

Tailwind Grid Rows Class Table

Class	Properties
grid-rows-1	grid-template-rows: repeat(1, minmax(0, 1fr));
grid-rows-2	grid-template-rows: repeat(2, minmax(0, 1fr));
grid-rows-3	grid-template-rows: repeat(3, minmax(0, 1fr));
grid-rows-4	grid-template-rows: repeat(4, minmax(0, 1fr));
grid-rows-5	grid-template-rows: repeat(5, minmax(0, 1fr));
grid-rows-6	grid-template-rows: repeat(6, minmax(0, 1fr));
grid-rows-none	grid-template-rows: none;

Windframe Tailwind blocks

Team

Windframe is a drag and drop builder for rapidly building tailwind css websites and UIs

Start building stunning tailwind UIs!

Build from scratch or select prebuilt tailwind templates

Learn more about Windframe