Tailwind CSS for Flexbox and Grid Layout

Tailwind CSS provides powerful utility classes to manage layouts, especially Flexbox and Grid.

The Flexbox and Grid utility classes allow you to efficiently create responsive, flexible layouts without writing custom CSS.

Tailwind CSS's philosophy is to control layout through low-level utility-first classes, flexibly combining classes to meet different design needs.

1. Flexbox Layout

Flexbox is a layout mode that helps developers create one-dimensional (horizontal or vertical) layouts.

Tailwind CSS provides several concise utility classes to control all aspects of Flexbox layout, including direction, alignment, and flexibility.

Setting Up Flex Container

To create a Flexbox layout, you first need to set the element as a flex container.

Example

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

Try it Yourself »

`flex` sets the element's display to `flex`, enabling Flexbox layout.

Utility classes for the initial size of flex items and their corresponding CSS properties:

Tailwind class nameCSS property and valueDescription
basis-0flex-basis:0px;Sets the flex item's basis size to 0px.
basis-1flex-basis:0.25rem;Sets the flex item's basis size to 4px.
basis-2flex-basis:0.5rem;Sets the flex item's basis size to 8px.
basis-3flex-basis:0.75rem;Sets the flex item's basis size to 12px.
basis-4flex-basis:1rem;Sets the flex item's basis size to 16px.
basis-5flex-basis:1.25rem;Sets the flex item's basis size to 20px.
basis-6flex-basis:1.5rem;Sets the flex item's basis size to 24px.
basis-7flex-basis:1.75rem;Sets the flex item's basis size to 28px.
basis-8flex-basis:2rem;Sets the flex item's basis size to 32px.
basis-9flex-basis:2.25rem;Sets the flex item's basis size to 36px.
basis-10flex-basis:2.5rem;Sets the flex item's basis size to 40px.
basis-11flex-basis:2.75rem;Sets the flex item's basis size to 44px.
basis-12flex-basis:3rem;Sets the flex item's basis size to 48px.
basis-14flex-basis:3.5rem;Sets the flex item's basis size to 56px.
basis-16flex-basis:4rem;Sets the flex item's basis size to 64px.
basis-20flex-basis:5rem;Sets the flex item's basis size to 80px.
basis-24flex-basis:6rem;Sets the flex item's basis size to 96px.
basis-28flex-basis:7rem;Sets the flex item's basis size to 112px.
basis-32flex-basis:8rem;Sets the flex item's basis size to 128px.
basis-36flex-basis:9rem;Sets the flex item's basis size to 144px.
basis-40flex-basis:10rem;Sets the flex item's basis size to 160px.
basis-44flex-basis:11rem;Sets the flex item's basis size to 176px.
basis-48flex-basis:12rem;Sets the flex item's basis size to 192px.
basis-52flex-basis:13rem;Sets the flex item's basis size to 208px.
basis-56flex-basis:14rem;Sets the flex item's basis size to 224px.
basis-60flex-basis:15rem;Sets the flex item's basis size to 240px.
basis-64flex-basis:16rem;Sets the flex item's basis size to 256px.
basis-72flex-basis:18rem;Sets the flex item's basis size to 288px.
basis-80flex-basis:20rem;Sets the flex item's basis size to 320px.
basis-96flex-basis:24rem;Sets the flex item's basis size to 384px.
basis-autoflex-basis:auto;Sets the flex item's basis size to auto.
basis-pxflex-basis:1px;Sets the flex item's basis size to 1px.
basis-0.5flex-basis:0.125rem;Sets the flex item's basis size to 2px.
basis-1.5flex-basis:0.375rem;Sets the flex item's basis size to 6px.
basis-2.5flex-basis:0.625rem;Sets the flex item's basis size to 10px.
basis-3.5flex-basis:0.875rem;Sets the flex item's basis size to 14px.
basis-1/2flex-basis:50%;Sets the flex item's basis size to half the container width.
basis-1/3flex-basis:33.333333%;Sets the flex item's basis size to one-third of the container width.
basis-2/3flex-basis:66.666667%;Sets the flex item's basis size to two-thirds of the container width.
basis-1/4flex-basis:25%;Sets the flex item's basis size to one-fourth of the container width.
basis-2/4flex-basis:50%;Sets the flex item's basis size to one-half of the container width.
basis-3/4flex-basis:75%;Sets the flex item's basis size to three-fourths of the container width.
basis-1/5flex-basis:20%;Sets the flex item's basis size to one-fifth of the container width.
basis-2/5flex-basis:40%;Sets the flex item's basis size to two-fifths of the container width.
basis-3/5flex-basis:60%;Sets the flex item's basis size to three-fifths of the container width.
basis-4/5flex-basis:80%;Sets the flex item's basis size to four-fifths of the container width.
basis-1/6flex-basis:16.666667%;Sets the flex item's basis size to one-sixth of the container width.
basis-2/6flex-basis:33.333333%;Sets the flex item's basis size to two-sixths of the container width.
basis-3/6flex-basis:50%;Sets the flex item's basis size to two-thirds of the container width.
basis-4/6flex-basis:66.666667%;Sets the flex item's basis size to four-sixths of the container width.
basis-5/6flex-basis:83.333333%;Sets the flex item's basis size to five-sixths of the container width.
basis-1/12flex-basis:8.333333%;Sets the flex item's basis size to 8.33%.
basis-2/12flex-basis:16.666667%;Sets the flex item's basis size to 16.67%.
basis-3/12flex-basis:25%;Sets the flex item's basis size to 25%.
basis-4/12flex-basis:33.333333%;Sets the flex item's basis size to 33.33%.
basis-5/12flex-basis:41.666667%;Sets the flex item's basis size to 41.67%.
basis-6/12flex-basis:50%;Sets the flex item's basis size to 50%.
basis-7/12flex-basis:58.333333%;Sets the flex item's basis size to 58.33%.
basis-8/12flex-basis:66.666667%;Sets the flex item's basis size to 66.67%.
basis-9/12flex-basis:75%;Sets the flex item's basis size to 75%.
basis-10/12flex-basis:83.333333%;Sets the flex item's basis size to 83.33%.
basis-11/12flex-basis:91.666667%;Sets the flex item's basis size to 91.67%.
basis-fullflex-basis:100%;Sets the flex item's basis size to 100%.

Example

<div class="flex flex-row">
  <div class="basis-1/4">01</div>
  <div class="basis-1/4">02</div>
  <div class="basis-1/2">03</div>
</div>

Try it Yourself »

Flex Direction

`flex-direction` controls the direction of the main axis (i.e., the direction in which items are arranged inside the flex container).

Tailwind provides the following utility classes to set the direction:

  • flex-rowDefault value, items are arranged horizontally from left to right.
  • flex-row-reverseItems are arranged horizontally from right to left.
  • flex-colItems are arranged vertically from top to bottom.
  • flex-col-reverseItems are arranged vertically from bottom to top.

Example

<div class="flex flex-row ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

<div class="flex flex-row-reverse ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

<div class="flex flex-col ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Try it Yourself »

Flex Wrapping (Flex Wrap)

By default, items in a Flexbox container are arranged in a single line.

If you want them to wrap, you can use the `flex-wrap` utility class.

  • flex-wrapAllows items to wrap.
  • flex-nowrapPrevents items from wrapping.
  • flex-wrap-reverseReverses wrapping.

Example

<div class="flex flex-nowrap">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

<div class="flex flex-wrap">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

<div class="flex flex-wrap-reverse">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Try it Yourself »

Flex Item Flexibility

Flexbox allows element sizes to grow and shrink based on available space.

Tailwind CSS provides the following utility classes to control flexibility:

Tailwind class nameCSS property and valueDescription
flex-1flex: 1 1 0%;Gives flex items equal flex-grow and flex-shrink abilities with a basis size of 0%, commonly used to create equal-width or equal-height flex layouts.
flex-autoflex: 1 1 auto;Gives flex items an automatic basis size and equal flex-grow and flex-shrink abilities, commonly used to let flex items fill extra space.
flex-initialflex: 0 1 auto;Gives flex items an automatic basis size, does not grow but can shrink, used to maintain the element's natural size unless space is insufficient.
flex-noneflex: none;Prevent flex items from growing or shrinking, keeping them at their base size. Often used to fix the size of elements.

Example

<div class="flex">
  <div class="flex-none w-14 ...">
    01
  </div>
  <div class="flex-initial w-64 ...">
    02
  </div>
  <div class="flex-initial w-32 ...">
    03
  </div>
</div>


<div class="flex">
  <div class="flex-none w-14 ...">
    01
  </div>
  <div class="flex-1 w-64 ...">
    02
  </div>
  <div class="flex-1 w-32 ...">
    03
  </div>
</div>


Try it Yourself »

The flex-grow Property

The following are utility classes that control the flex-grow property of flex items, along with their corresponding CSS properties:

Tailwind class nameCSS properties and valuesDescription
growflex-grow: 1;Allows the flex item to grow to fill extra space, with a grow ratio of 1.
grow-0flex-grow: 0;Prevents the flex item from growing to fill extra space, with a grow ratio of 0.

Example

<div class="flex ...">
  <div class="flex-none w-14 h-14 ...">
    01
  </div>
  <div class="grow h-14 ...">
    02
  </div>
  <div class="flex-none w-14 h-14 ...">
    03
  </div>
</div>

Try it Yourself »

The flex-shrink Property

The following are utility classes that control the flex-shrink property of flex items, along with their corresponding CSS properties:

Tailwind class nameCSS properties and valuesDescription
shrinkflex-shrink: 1;Allows the flex item to shrink when necessary to fit the flex container, with a shrink ratio of 1.
shrink-0flex-shrink: 0;Prevents the flex item from shrinking when necessary to fit the flex container, with a shrink ratio of 0.

Example

<div class="flex ...">
  <div class="flex-none w-14 h-14 ...">
    01
  </div>
  <div class="shrink w-64 h-14 ...">
    02
  </div>
  <div class="flex-none w-14 h-14 ...">
    03
  </div>
</div>

Try it Yourself »

Ordering

The following are utility classes used to control the order of flex items or grid items, along with their corresponding CSS properties:

Tailwind class nameCSS properties and valuesDescription
order-1order: 1;Sets the order of the flex item or grid item to 1.
order-2order: 2;Sets the order of the flex item or grid item to 2.
order-3order: 3;Sets the order of the flex item or grid item to 3.
order-4order: 4;Sets the order of the flex item or grid item to 4.
order-5order: 5;Sets the order of the flex item or grid item to 5.
order-6order: 6;Sets the order of the flex item or grid item to 6.
order-7order: 7;Sets the order of the flex item or grid item to 7.
order-8order: 8;Sets the order of the flex item or grid item to 8.
order-9order: 9;Sets the order of the flex item or grid item to 9.
order-10order: 10;Sets the order of the flex item or grid item to 10.
order-11order: 11;Sets the order of the flex item or grid item to 11.
order-12order: 12;Sets the order of the flex item or grid item to 12.
order-firstorder: -9999;Sets the order of the flex item or grid item to the first.
order-lastorder: 9999;Sets the order of the flex item or grid item to the last.
order-noneorder: 0;Sets the order of the flex item or grid item to the default order, i.e., does not change its order.

Example

<div class="flex justify-between ...">
  <div class="order-last">01</div>
  <div>02</div>
  <div>03</div>
</div>

Try it Yourself »

Grid Layout

Grid is another layout model that allows you to precisely position elements in rows and columns, and easily create complex layouts.

Tailwind CSS provides powerful utility classes for working with grid layouts.

The following are utility classes in Tailwind CSS for specifying the number of columns in a grid layout, along with their corresponding CSS properties:

Tailwind class nameCSS properties and valuesDescription
grid-cols-1grid-template-columns: repeat(1, minmax(0, 1fr));Creates a grid layout with 1 column.
grid-cols-2grid-template-columns: repeat(2, minmax(0, 1fr));Creates a grid layout with 2 columns.
grid-cols-3grid-template-columns: repeat(3, minmax(0, 1fr));Creates a grid layout with 3 columns.
grid-cols-4grid-template-columns: repeat(4, minmax(0, 1fr));Creates a grid layout with 4 columns.
grid-cols-5grid-template-columns: repeat(5, minmax(0, 1fr));Creates a grid layout with 5 columns.
grid-cols-6grid-template-columns: repeat(6, minmax(0, 1fr));Creates a grid layout with 6 columns.
grid-cols-7grid-template-columns: repeat(7, minmax(0, 1fr));Creates a grid layout with 7 columns.
grid-cols-8grid-template-columns: repeat(8, minmax(0, 1fr));Creates a grid layout with 8 columns.
grid-cols-9grid-template-columns: repeat(9, minmax(0, 1fr));Creates a grid layout with 9 columns.
grid-cols-10grid-template-columns: repeat(10, minmax(0, 1fr));Creates a grid layout with 10 columns.
grid-cols-11grid-template-columns: repeat(11, minmax(0, 1fr));Creates a grid layout with 11 columns.
grid-cols-12grid-template-columns: repeat(12, minmax(0, 1fr));Creates a grid layout with 12 columns.
grid-cols-nonegrid-template-columns: none;Does not create grid columns; child elements will not use grid layout.
grid-cols-subgridgrid-template-columns: subgrid;Uses a subgrid layout; child elements will inherit the parent grid's column definitions.

Example

<div class="grid grid-cols-4 gap-4">
  <div>01</div>
  <!-- ... -->
  <div>09</div>
</div>

Try it Yourself »
  • grid: Enables Grid layout.
  • grid-cols-{n}: Sets the number of grid columns.
  • gap-{size}: Sets the gap between columns and rows.

Grid Rows and Columns

Throughgrid-template-columnsandgrid-template-rowsControl the width and height of columns and rows. Tailwind provides the following utility classes to control:

  • grid-cols-{n}: Sets the number of grid columns (for example,grid-cols-3indicates three columns).
  • grid-rows-{n}: Sets the number of grid rows (for example,grid-rows-2indicates two rows).
  • col-span-{n}: Sets how many columns an item spans.
  • row-span-{n}: Sets how many rows an item spans.

Example

<div class="grid grid-cols-4 gap-4">
  <div>01</div>
  <!-- ... -->
  <div>05</div>
  <div class="grid grid-cols-subgrid gap-4 col-span-3">
    <div class="col-start-2">06</div>
  </div>
</div>

Try it Yourself »

Example

<div class="grid grid-cols-3 gap-4">
  <div class="...">01</div>
  <div class="...">02</div>
  <div class="...">03</div>
  <div class="col-span-2 ...">04</div>
  <div class="...">05</div>
  <div class="...">06</div>
  <div class="col-span-2 ...">07</div>
</div>

Try it Yourself »

Example

<div class="grid grid-rows-3 grid-flow-col gap-4">
  <div class="row-span-3 ...">01</div>
  <div class="col-span-2 ...">02</div>
  <div class="row-span-2 col-span-2 ...">03</div>
</div>

Try it Yourself »

Positioning Grid Items

grid-column and grid-row control the position of each item in the grid.

You can specify it with the following utility classes:

  • col-start-{n}: Sets the item to start at column n.
  • col-end-{n}: Sets the item to end at column n.
  • row-start-{n}: Sets the item to start at row n.
  • row-end-{n}: Sets the item to end at row n.

Example

<div class="grid grid-cols-6 gap-4">
  <div class="col-start-2 col-span-4 ...">01</div>
  <div class="col-start-1 col-end-3 ...">02</div>
  <div class="col-end-7 col-span-2 ...">03</div>
  <div class="col-start-1 col-end-7 ...">04</div>
</div>

Try it Yourself »

Example

<div class="grid grid-rows-3 grid-flow-col gap-4">
  <div class="row-start-2 row-span-2 ...">01</div>
  <div class="row-end-3 row-span-2 ...">02</div>
  <div class="row-start-1 row-end-4 ...">03</div>
</div>

Try it Yourself »

Alignment and Distribution

Similar to Flexbox, Grid also provides alignment and distribution options.

The justify-content property is used to align child elements within the container along the main axis (horizontal direction).

Tailwind class nameCSS properties and valuesDescription
justify-normaljustify-content: normal;Uses the default alignment, usually equivalent tostart。
justify-startjustify-content: flex-start;Moves all child elements to the start of the container. In a horizontal layout, child elements align to the left.
justify-endjustify-content: flex-end;Moves all child elements to the end of the container. In a horizontal layout, child elements align to the right.
justify-centerjustify-content: center;Centers all child elements.
justify-betweenjustify-content: space-between;Distributes space equally between child elements, leaving no space at the ends.
justify-aroundjustify-content: space-around;Distributes space equally between child elements, leaving half-size space at the ends.
justify-evenlyjustify-content: space-evenly;Distributes space completely equally between child elements, including space at the ends.
justify-stretchjustify-content: stretch;Stretches child elements to fill the container, with each child element occupying the same space.

Example

<div class="flex justify-start ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Try it Yourself »

Other alignment settings:

  • justify-items: Controls the alignment of grid cell content.
  • justify-self: Controls the alignment of a single grid item.
  • align-items: Controls the vertical alignment of grid cells.
  • align-self: Controls the vertical alignment of a single grid item.

Example

<div class="grid justify-items-start ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>

Try it Yourself »
Other Extensions