TAILWIND CSS BASIC STYLES

THE DIFFERENCE BETWEEN FLEX AND INLINE FLEX

WHAT IS FLOATS
Floats in Tailwind CSS
In Tailwind CSS, floats are utility classes used to control the layout and positioning of elements within a container. These classes allow content to wrap around an element, similar to the traditional CSS float property. Tailwind provides several float classes, including float-right, float-left, float-start, float-end, and float-none, to align elements to the right, left, start, end, or default position of the container respectively.

These classes are particularly useful for legacy projects where grid and flexbox might not be fully utilized, enabling precise control over element placement and content flow.

HOW TO USE IT?
Layout

Floats
Utilities for controlling the wrapping of content around an element.

Quick reference
Class
Properties
float-start float: inline-start;
float-end float: inline-end;
float-right float: right;
float-left float: left;
float-none float: none;

**CODE**
**Basic usage
Floating elements to the right**
Use the float-right utility to float an element to the right of its container.

<img class="float-right ..." src="path/to/image.jpg">
<p>Maybe we can live without libraries, people like you and me. ...</p>

**Floating elements to the left
Use the float-left utility to float an element to the left of its container.**

<img class="float-left ..." src="path/to/image.jpg">
<p>Maybe we can live without libraries, people like you and me. ...</p>

**Disabling a float
Use the float-none utility to reset any floats that are applied to an element. This is the default value for the float property.**

<img class="float-none ..." src="path/to/image.jpg">
<p>Maybe we can live without libraries, people like you and me. ...</p>

Using logical properties
Use the float-start or float-end utilities, which use logical properties to map to either the left or right side based on the text direction.

<img class="float-start ..." src="path/to/image.jpg">
<p>Maybe we can live without libraries, people like you and me. ...</p>

<img class="float-start ..." src="path/to/image.jpg">
<p dir="rtl">... ربما يمكننا العيش بدون مكتبات، أشخاص مثلي ومثلك. ربما. بالتأكيد </p>

WHAT IS BOX SIZING
Box Sizing in Tailwind CSS
Box sizing in Tailwind CSS is a utility class that defines how an element's width and height are calculated as the element's total size, including how an element's padding and border are included in its width and height. The box-border class sets the element's box-sizing to border-box, meaning the width and height of the element include its padding and border. The box-content class sets the element's box-sizing to content-box, meaning the width and height of the element do not include its padding and border.

For example, a 100px × 100px element with a 2px border and 4px of padding on all sides will be rendered as 100px × 100px with an internal content area of 88px × 88px when using the box-border class. Conversely, the same element with the box-content class will be rendered as 112px × 112px, with an internal content area of 100px × 100px.

Tailwind CSS makes border-box the default for all elements in its preflight base styles, but you can override this behavior by applying the box-content class or modifying your tailwind.config.js file.

Layout

Box Sizing
Utilities for controlling how the browser should calculate an element's total size.

Quick reference
Class
Properties
box-border box-sizing: border-box;
box-content box-sizing: content-box;

Basic usage
Including borders and padding
Use the box-border utility to set an element’s box-sizing to border-box, telling the browser to include the element’s borders and padding when you give it a height or width.

This means a 100px × 100px element with a 2px border and 4px of padding on all sides will be rendered as 100px × 100px, with an internal content area of 88px × 88px.

Tailwind makes this the default for all elements in our preflight base styles.

<div class="box-border h-32 w-32 p-4 border-4 ...">
<!-- ... -->
</div>

Excluding borders and padding
Use the box-content utility to set an element’s box-sizing to content-box, telling the browser to add borders and padding on top of the element’s specified width or height.

This means a 100px × 100px element with a 2px border and 4px of padding on all sides will actually be rendered as 112px × 112px, with an internal content area of 100px × 100px.

<div class="box-content h-32 w-32 p-4 border-4 ...">
<!-- ... -->
</div>

**WHAT IS DISPLAY?**
Display in Tailwind CSS
In Tailwind CSS, the display property is controlled through utility classes that allow you to define how elements are displayed on the screen. These classes simplify the application of CSS display properties directly within HTML, making it easier to build custom designs without writing custom CSS.

Tailwind CSS provides a variety of display classes, such as block, inline-block, inline, flex, inline-flex, table, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row-group, table-row, flow-root, grid, inline-grid, contents, and hidden.

For example, the block class sets the display behavior to block, making the element occupy the full width available and starting a new line both before and after the element.
Similarly, the inline-block class aligns the element inline but allows for editing the height and width of the block.

Tailwind CSS also supports responsive design, allowing you to apply display classes at different breakpoints. For instance, md:block sets the display behavior to block starting from the medium breakpoint and above.

Layout

Display
Utilities for controlling the display box type of an element.

Quick reference
Class
Properties
block display: block;
inline-block display: inline-block;
inline display: inline;
flex display: flex;
inline-flex display: inline-flex;
table display: table;
inline-table display: inline-table;
table-caption display: table-caption;
table-cell display: table-cell;
table-column display: table-column;
table-column-group display: table-column-group;
table-footer-group display: table-footer-group;
table-header-group display: table-header-group;
table-row-group display: table-row-group;
table-row display: table-row;
flow-root display: flow-root;
grid display: grid;
inline-grid display: inline-grid;
contents display: contents;
list-item display: list-item;
hidden display: none;

Basic usage
Block & Inline
Use the inline, inline-block, and block utilities to control the flow of text and elements.

<div>
When controlling the flow of text, using the CSS property
<span class="inline">display: inline</span>
will cause the text inside the element to wrap normally.

While using the property <span class="inline-block">display: inline-block</span>
will wrap the element to prevent the text inside from extending beyond its parent.

Lastly, using the property <span class="block">display: block</span>
will put the element on its own line and fill its parent.
</div>

Flow Root
Use the flow-root utility to create a block-level element with its own block formatting context.

<div class="p-4">
<div class="flow-root ...">
<div class="my-4 ...">Well, let me tell you something, ...</div>
</div>
<div class="flow-root ...">
<div class="my-4 ...">Sure, go ahead, laugh if you want...</div>
</div>
</div>

Flex
Use the flex utility to create a block-level flex container.

<div class="flex items-center">
<img src="path/to/image.jpg">
<div>
<strong>Andrew Alfred</strong>
<span>Technical advisor</span>
</div>
</div>

Inline Flex
Use the inline-flex utility to create an inline flex container that flows with text.

<p>
Today I spent most of the day researching ways to ...
<span class="inline-flex items-baseline">
<img src="path/to/image.jpg" alt="" class="self-center w-5 h-5 rounded-full mx-1" />
<span>Kramer</span>
</span>
keeps telling me there is no way to make it work, that ...
</p>

Grid
Use the grid utility to create a grid container.

<div class="grid gap-4 grid-cols-3 grid-rows-3">
<!-- ... -->
</div>

Inline Grid
Use the inline-grid utility to create an inline grid container.

<span class="inline-grid grid-cols-3 gap-4">
<span>01</span>
<span>02</span>
<span>03</span>
<span>04</span>
<span>05</span>
<span>06</span>
</span>
<span class="inline-grid grid-cols-3 gap-4">
<span>01</span>
<span>02</span>
<span>03</span>
<span>04</span>
<span>05</span>
<span>06</span>
</span>

Contents
Use the contents utility to create a “phantom” container whose children act like direct children of the parent.

<div class="flex ...">
<div class="flex-1 ...">01</div>
<div class="contents">
<div class="flex-1 ...">02</div>
<div class="flex-1 ...">03</div>
</div>
<div class="flex-1 ...">04</div>
</div>

Table
Use the table, table-row, table-cell, table-caption, table-column, table-column-group, table-header-group, table-row-group, and table-footer-group utilities to create elements that behave like their respective table elements.

<div class="table w-full ...">
<div class="table-header-group ...">
<div class="table-row">
<div class="table-cell text-left ...">Song</div>
<div class="table-cell text-left ...">Artist</div>
<div class="table-cell text-left ...">Year</div>
</div>
</div>
<div class="table-row-group">
<div class="table-row">
<div class="table-cell ...">The Sliding Mr. Bones (Next Stop, Pottersville)</div>
<div class="table-cell ...">Malcolm Lockyer</div>
<div class="table-cell ...">1961</div>
</div>
<div class="table-row">
<div class="table-cell ...">Witchy Woman</div>
<div class="table-cell ...">The Eagles</div>
<div class="table-cell ...">1972</div>
</div>
<div class="table-row">
<div class="table-cell ...">Shining Star</div>
<div class="table-cell ...">Earth, Wind, and Fire</div>
<div class="table-cell ...">1975</div>
</div>
</div>
</div>

Hidden
Use the hidden utility to set an element to display: none and remove it from the page layout (compare with invisible from the visibility documentation).

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

WHAT IS POSITION
Position
Tailwind CSS Positions
The position utility class in Tailwind CSS allows you to control the positioning behavior of an element within its containing parent or the entire viewport. With Tailwind's position class, you can easily manipulate the placement of elements on your web page. Tailwind CSS allows you to apply position classes responsively at different breakpoints. To use responsive position classes, you can append the breakpoint prefix to the utility class.

To apply a specific position to an element, you can use the position-{value} utility class, where {value} represents the desired position. Some of the positions are static, absolute, fixed, etc.

Static
The default position value follows the normal flow of the document, and it doesn't require any additional classes. Elements with position-static properties are positioned according to the normal flow of the document.

<div class="w-full relative h-44 bg-indigo-50 p-8 rounded-xl">
<div class="static w-full h-full">
<div
class=" bg-indigo-200 p-3 rounded-lg font-medium font-manrope text-lg text-indigo-600 w-full h-full">
Static parent</div>
<div
class="absolute bottom-0 left-0 rounded-xl w-40 h-14 flex items-center justify-center bg-indigo-600 text-white text-base font-medium">
Absolute child</div>
</div>
</div>

Relative
Adding a relative position to an element means it's positioned relative to its normal position in the document flow. You can adjust its position using top, right, bottom, and left utility classes. Use the below tailwind CSS position relative example as a reference for your project.

<div class="w-full relative h-44 bg-indigo-50 p-8 rounded-xl">
<div class="relative w-full h-full">
<div
class=" bg-indigo-200 p-3 rounded-lg font-medium font-manrope text-lg text-indigo-600 w-full h-full">
relative parent</div>
<div
class="absolute bottom-0 left-0 rounded-xl w-40 h-14 flex items-center justify-center bg-indigo-600 text-white text-base font-medium">
Absolute child</div>
</div>
</div>

Absolute
Tailwind CSS Postion absolute positions the element relative to its nearest positioned parent. If no parent is positioned, it is positioned relative to the initial containing block (usually the viewport).

<div class="flex flex-col gap-10 w-full">
<div class="w-full relative h-auto bg-indigo-200 p-5 pt-2 rounded-xl">
<p class="text-base font-semibold text-indigo-600 pb-3">Relative Parent</p>
<div class="static w-full p-3 rounded-lg h-auto bg-indigo-50">
<p class="font-medium font-manrope text-lg text-indigo-600 mb-3">Static parent</p>
<div class="flex items-center gap-5">
<div class="rounded-lg px-5 py-3.5 bg-indigo-600 text-white text-base font-medium ">Static child</div>
<div class="rounded-lg px-5 py-3 border-2 border-indigo-600 text-indigo-600 text-base font-medium ">Static sibling</div>
</div>
</div>
</div>
<div class="w-full relative h-auto bg-indigo-200 p-5 pt-2 rounded-xl">
<p class="text-base font-semibold text-indigo-600 pb-3">Relative Parent</p>
<div class="static w-full p-3 rounded-lg h-auto bg-indigo-50">
<p class="font-medium font-manrope text-lg text-indigo-600 mb-3">Static parent</p>
<div class="flex items-center gap-5">
<div class="absolute top-0 right-0 rounded-lg px-5 py-3.5 bg-indigo-600 text-white text-base font-medium ">absolute child</div>
<div class="rounded-lg px-5 py-3 border-2 border-indigo-600 text-indigo-600 text-base font-medium ">Static sibling</div>
</div>
</div>
</div>
</div>

Centering
You can add inset-0 to the elements to center an absolutely positioned element horizontally and vertically within its containing element. Use top-0, right-0, bottom-0, or left-0 to center an absolutely positioned element to the top, right, bottom, or left of its containing element.

<div class="relative w-full h-44 bg-indigo-50 p-8 rounded-xl">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-xl w-40 h-14 flex items-center justify-center bg-indigo-600 text-white text-base font-medium">
Absolute child</div>
</div>

Fixed
Positions the element relative to the viewport. It remains fixed even when the page is scrolled. You can use the below example of a tailwind CSS position fixed using utility classes.

<div class="relative w-full h-auto max-w-xs mx-auto rounded-lg shadow-sm shadow-gray-400 overflow-auto">
<div
class="absolute z-20 top-0 right-0 left-0 py-2.5 px-3 text-lg font-manrope font-semibold text-white bg-indigo-600/75 backdrop-blur-sm text-center">
Flowers</div>
<div class="flex flex-col gap-5 pt-14 px-6 overflow-auto h-80">
<p class="text-base font-normal text-gray-900">
Flowers, the delicate jewels of nature, captivate with their kaleidoscope of colors, intricate patterns, and
alluring fragrances. Each bloom tells a story of life, from the tender bud emerging from the earth to the
full blossom basking in the sun's warmth. They symbolize love, beauty, and renewal, enchanting us with their
ephemeral existence. From the regal elegance of roses to the cheerful vibrancy of sunflowers, flowers hold a
universal allure, evoking emotions and memories with their mere presence. Whether adorning a bridal bouquet,
brightening a room, or gracing a meadow with their splendor, flowers whisper secrets of the natural world,
inviting us to pause, breathe, and appreciate the fleeting beauty that surrounds us.
</p>
</div>
</div>

Sticky
It allows an element to behave like position relative within its parent until a given offset threshold is met in the viewport, in which case it "sticks" to the top or bottom of the viewport accordingly.

<div class="relative w-full h-96 max-w-md mx-auto rounded-lg shadow-sm shadow-gray-400 overflow-auto">
<div class="sticky z-10 top-0 right-0 left-0 py-2.5 px-3 text-lg font-manrope font-semibold text-white bg-indigo-600/75 backdrop-blur-sm text-center">Flowers</div>
<div class="flex flex-col gap-5 p-5 ">
<div class="flex">
<p class="text-base font-medium text-gray-900">Rose</p>
</div>
<div class="flex">
<p class="text-base font-medium text-gray-900">Tulip</p>
</div>
<div class="flex">
<p class="text-base font-medium text-gray-900">Lily</p>
</div>
<div class="flex">
<p class="text-base font-medium text-gray-900">Orchid</p>
</div>
<div class="flex">
<p class="text-base font-medium text-gray-900">Hydrangea</p>
</div>
</div>

<div class="sticky z-10 top-0 right-0 left-0 py-2.5 px-3 text-lg font-manrope font-semibold text-white bg-indigo-600/75 backdrop-blur-sm text-center">Fruits</div>
<div class="flex flex-col gap-5 p-5 ">
<div class="flex">
<p class="text-base font-medium text-gray-900">Apple</p>
</div>
<div class="flex">
<p class="text-base font-medium text-gray-900">Banana</p>
</div>
<div class="flex">
<p class="text-base font-medium text-gray-900">Orange</p>
</div>
<div class="flex">
<p class="text-base font-medium text-gray-900">Strawberry</p>
</div>
<div class="flex">
<p class="text-base font-medium text-gray-900">Grape</p>
</div>
<div class="flex">
<p class="text-base font-medium text-gray-900">Mango</p>
</div>
</div>
<div class="sticky z-10 top-0 right-0 left-0 py-2.5 px-3 text-lg font-manrope font-semibold text-white bg-indigo-600/75 backdrop-blur-sm text-center">Vegetables</div>
<div class="flex flex-col gap-5 p-5 ">
<div class="flex">
<p class="text-base font-medium text-gray-900">Carrot</p>
</div>
<div class="flex">
<p class="text-base font-medium text-gray-900">Tomato</p>
</div>
<div class="flex">
<p class="text-base font-medium text-gray-900">Potato</p>
</div>
<div class="flex">
<p class="text-base font-medium text-gray-900">Onion</p>
</div>
<div class="flex">
<p class="text-base font-medium text-gray-900">Lettuce</p>
</div>
<div class="flex">
<p class="text-base font-medium text-gray-900">Cucumber</p>
</div>
<div class="flex">
<p class="text-base font-medium text-gray-900">Bell pepper</p>
</div>
<div class="flex">
<p class="text-base font-medium text-gray-900">Broccoli</p>
</div>
<div class="flex">
<p class="text-base font-medium text-gray-900">Spinach</p>
</div>
</div>
</div>

WHAT IS VISIBILITY
Visibility in Tailwind CSS
In Tailwind CSS, the visibility property is used to control the visibility of an element without removing it from the document flow. This means that even if an element is hidden, it still occupies space in the layout. Tailwind provides several utility classes for managing visibility:

visible: Makes an element visible. This is useful for undoing the invisible utility at different screen sizes.
invisible: Hides an element but maintains its space in the layout, affecting the layout of other elements.
collapse: Hides table rows, row groups, columns, and column groups as if they were set to display: none, but without impacting the size of other rows and columns.
To apply these utilities at specific breakpoints, you can prefix the class with a breakpoint variant like md:. For example, md:invisible would apply the invisible utility at medium screen sizes and above.

Tailwind also supports responsive design through breakpoints and media queries, allowing you to control the visibility of elements at different screen sizes.

Layout

visibility
Utilities for controlling the visibility of an element.

Class
Styles
visible - visibility: visible;
invisible - visibility: hidden;
collapse - visibility: collapse;

Examples
Making elements invisible
Use the invisible utility to hide an element, but still maintain its place in the document, affecting the layout of other elements:

<div class="grid grid-cols-3 gap-4">
<div>01</div>
<div class="invisible ...">02</div>
<div>03</div>
</div>

Collapsing elements
Use the collapse utility to hide table rows, row groups, columns, and column groups as if they were set to display: none, but without impacting the size of other rows and columns:

<table>
<thead>
<tr>
<th>Invoice #</th>
<th>Client</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>#100</td>
<td>Pendant Publishing</td>
<td>$2,000.00</td>
</tr>
<tr class="collapse">
<td>#101</td>
<td>Kruger Industrial Smoothing</td>
<td>$545.00</td>
</tr>
<tr>
<td>#102</td>
<td>J. Peterman</td>
<td>$10,000.25</td>
</tr>
</tbody>
</table>

This makes it possible to dynamically toggle rows and columns without affecting the table layout.

Making elements visible
Use the visible utility to make an element visible:

<div class="grid grid-cols-3 gap-4">
<div>01</div>
<div class="visible ...">02</div>
<div>03</div>
</div>

Responsive design
Prefix a visibility utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<div class="visible md:invisible ...">
<!-- ... -->
</div>

WHAT IS Z-INDEX
Z-INDEX in Tailwind CSS
In Tailwind CSS, the z-index property controls the stacking order of elements along the z-axis, ensuring that elements with higher z-index values appear above those with lower values.
Tailwind CSS provides utility classes such as z-0, z-10, z-20, and so on, to set the stacking order of elements without writing custom CSS.
These classes correspond to specific z-index values, for example, z-10 sets the z-index to 10.
Additionally, the z-auto class sets the z-index to auto, which follows the default stacking context rules.

Layout

z-index
Utilities for controlling the stack order of an element.

Class - Styles
z-<number> - z-index: <number>;
z-auto - z-index: auto;
z-[<value>] - z-index: <value>;
z-(<custom-property>) - z-index: var(<custom-property>);

Examples
Basic example
Use the z-<number> utilities like z-10 and z-50 to control the stack order (or three-dimensional positioning) of an element, regardless of the order it has been displayed:

<div class="z-40 ...">05</div>
<div class="z-30 ...">04</div>
<div class="z-20 ...">03</div>
<div class="z-10 ...">02</div>
<div class="z-0 ...">01</div>

Using negative values
To use a negative z-index value, prefix the class name with a dash to convert it to a negative value:

<div class="...">05</div>
<div class="...">04</div>
<div class="-z-10 ...">03</div>
<div class="...">02</div>
<div class="...">01</div>

Using a custom value
Use the z-[<value>] syntax to set the stack order based on a completely custom value:

<div class="z-[calc(var(--index)+1)] ...">
<!-- ... -->
</div>

For CSS variables, you can also use the z-(<custom-property>) syntax:

<div class="z-(--my-z) ...">
<!-- ... -->
</div>

Responsive design
Prefix a z-index utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<div class="z-0 md:z-50 ...">
<!-- ... -->
</div>

WHAT IS GRID?
The grid CSS property is a shorthand property that sets all of the explicit and implicit grid properties in a single declaration.

Using grid you specify one axis using grid-template-rows or grid-template-columns, you then specify how content should auto-repeat in the other axis using the implicit grid properties: grid-auto-rows, grid-auto-columns, and grid-auto-flow.

Values
<'grid-template'>
Defines the grid-template including grid-template-columns, grid-template-rows and grid-template-areas.

<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?
Sets up an auto-flow by setting the row tracks explicitly via the grid-template-rows property (and the grid-template-columns property to none) and specifying how to auto-repeat the column tracks via grid-auto-columns (and setting grid-auto-rows to auto). grid-auto-flow is also set to column accordingly, with dense if it's specified.

All other grid sub-properties are reset to their initial values.

[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
Sets up an auto-flow by setting the column tracks explicitly via the grid-template-columns property (and the grid-template-rows property to none) and specifying how to auto-repeat the row tracks via grid-auto-rows (and setting grid-auto-columns to auto). grid-auto-flow is also set to row accordingly, with dense if it's specified.

All other grid sub-properties are reset to their initial values.

Formal definition
Initial value as each of the properties of the shorthand:
grid-template-rows: none
grid-template-columns: none
grid-template-areas: none
grid-auto-rows: auto
grid-auto-columns: auto
grid-auto-flow: row
grid-column-gap: 0
grid-row-gap: 0
column-gap: normal
row-gap: normal

CSS grid layout is a great way to keep your web content organized using a system of rows and columns.

In this post, you’ll learn how to use Tailwind Grid CSS classes to build web components. We’ll also cover how you can easily resize the rows and columns, and how to make the grid responsive.

Tailwind CSS is a utility-first, low-level CSS framework that allows you to build web components directly into your HTML. It’s different from other CSS frameworks, like Bootstrap, that have predefined web components.

What Tailwind provides is utility classes that will let you build more custom components.

Tailwind grid CSS classes
There are several grid utility classes available in Tailwind, and you’ll find them all in the documentation.

In plain CSS, if you want an element to be in a grid, you’ll use the display property and set it to grid. The equivalent to this in Tailwind is simply using the grid utility class. You’ll find this in the layout section of the documentation.

Give this class to the components you want in a grid, and it adds the CSS display: grid; property to the components.

How to create rows and columns
In plain CSS, the grid-template-columns property lets you specify the number of columns you want in the grid. With Tailwind, you’ll use the grid-cols-{n} class, with “n” being the number of equal-sized columns.

In the same way, you can use the grid-rows-{n} utility class when you want to add rows to the grid. This is in place of the grid-template-rows CSS property.

To illustrate, we’re going to build a simple container with a few elements inside it and display it in a grid layout.

Let’s get started!

We’re going for a 3-by-3 grid with nine grid items and also adding a gap between each cell with the gap-{size} class.

<div class="min-h-screen flex items-center justify-center">
<div class="grid grid-cols-3 grid-rows-3 gap-4">
<div>Cell 1</div>
<div>Cell 2</div>
<div>Cell 3</div>
<div>Cell 4</div>
<div>Cell 5</div>
<div>Cell 6</div>
<div>Cell 7</div>
<div>Cell 8</div>
<div>Cell 9</div>
</div>
</div>

Since this particular example is a 3-by-3 grid, you can actually leave out the grid-rows-3 class and the result will be the same.

In fact, with any number of grid items, you can specify a fixed number of rows or columns and the cells will automatically flow into the next grid line.

At this point, you can style the items as you wish by adding some utility classes. For this example, we’ve added a background color and some padding.

Here’s a screenshot of the grid:

You’ll notice the gap class adds equal spacing between every cell in the grid. You can change this and have a different gap size between the rows and columns.

The gap utility class for the columns is gap-x-{size}, and for the rows it’s gap-y-{size}.

Grid column and row start/end
The size of the grid items can be increased so that they occupy multiple rows or columns.

Tailwind has the grid column start/end and grid row start/end utilities to make this possible. These utility classes will go directly into the individual grid items, and they control the grid-column and grid-row CSS properties.

Apart from resizing the cells, you can also choose where the rows and columns start.

Spanning rows and columns
To increase the size of a grid item so that it expands across multiple columns, you’ll use the col-span-{n} class, with “n” being the number of columns you want that item to occupy. For the rows, the grid utility class is row-span-{n}.

Let’s see it in action. To illustrate, we’re going to create a masonry grid. A masonry grid is a grid where the cells don’t have a fixed height and length.

<div class="grid grid-cols-3 gap-3">
<div class="row-span-3 bg-white p-3 rounded-md">Cell 1</div>
<div class="row-span-2 bg-white p-3 rounded-md">Cell 2</div>
<div class="bg-white p-3 rounded-md">Cell 3</div>
<div class="bg-white p-3 rounded-md">Cell 4</div>
<div class="col-span-2 bg-white p-3 rounded-md">Cell 5</div>
<div class="bg-white p-3 rounded-md">Cell 6</div>
<div class="bg-white p-3 rounded-md">Cell 7</div>
<div class="bg-white p-3 rounded-md">Cell 8</div>
</div>

Starting and ending lines
For the columns, the grid utility classes col-start-{n} and col-end-{n} are used to change the position of the columns. To change the start and end positions for the rows, you’ll use row-start-{n} and row-end-{n}.

<div class="grid grid-cols-3 grid-rows-3 gap-3">
<div class="col-start-2 bg-white p-3 rounded-md">Cell 1</div>
<div class="bg-white p-3 rounded-md">Cell 2</div>
<div class="bg-white p-3 rounded-md">Cell 3</div>
<div class="bg-white p-3 rounded-md">Cell 4</div>
<div class="bg-white p-3 rounded-md">Cell 5</div
<div class="bg-white p-3 rounded-md">Cell 6</div>
<div class="bg-white p-3 rounded-md">Cell 7</div>
<div class="bg-white p-3 rounded-md">Cell 8</div>
</div>

A grid with a defined start position.
You can mix and match grid classes and get more interesting grid patterns.

Auto grid placement
Earlier, we mentioned how the grid items will auto-flow into the next line when you specify the number of columns or rows only. Defining both the number of columns and rows creates an explicit grid, and any overflow creates an implicit column or row. In Tailwind, there are grid auto-flow utilities, grid-auto-{keyword}, that control this placement of the grid items.

Using the grid-auto-row function makes any extra cell overflow into a new row outside the explicit grid lines. This is the default if no auto-flow class is added.

In the same way, using the grid-auto-col class adds the extra cells in a new column.

A grid child overflowing into a new row outside the explicit grid lines.
The grid-auto-dense class makes the grid items attempt to occupy every available space in the grid. Adding the “dense” keyword to the grid-auto-row and grid-auto-col classes performs the same function but in the implicit rows or columns. The default, if you don’t add an auto-flow utility, is grid-auto-row-dense.

There are also utilities for controlling the size of the implicit rows and columns. You’ll use the auto-cols-{size} class for the columns, and auto-rows-{size} for the rows.

Nesting grids
A nested grid is a grid within a grid. That is, one of the grid items will be a smaller grid.

It’s a pretty straightforward process to create a nested grid. First, you’ll build the bigger grid. Then, within one of the cells, build another grid.

<div class="grid grid-cols-3 grid-rows-3 gap-3">
<div class="bg-white p-3 rounded-md">Cell 1</div>
<div class="bg-white p-3 rounded-md">Cell 2</div>
<div class="bg-white p-3 rounded-md">Cell 3</div>
<div class="bg-white p-3 rounded-md">Cell 4</div>
<div class="bg-white p-3 rounded-md">Cell 5</div>
<div class="bg-white p-3 rounded-md">
<div class="flex items-center justify-center">
<div class="grid grid-cols-2 gap-2">
<div class="bg-red-400 p-2 rounded-md">1</div>
<div class="bg-red-400 p-2 rounded-md">2</div>
<div class="bg-red-400 p-2 rounded-md">3</div>
<div class="bg-red-400 p-2 rounded-md">4</div>
</div>
</div>
</div>
<div class="bg-white p-3 rounded-md">Cell 7</div>
<div class="bg-white p-3 rounded-md">Cell 8</div>
<div class="bg-white p-3 rounded-md">Cell 9</div>
</div>

A nested grid.
Since there’s no predefined dimensions for the grid items in this example, every cell expands to match the width and height of the biggest content, which in this case is the smaller grid.

Adding breakpoints
Sometimes a large grid will not look good on smaller screens, so there’s a need to collapse it so it fits. This is possible by adding breakpoints for small, medium, and large screens.

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
<div class="bg-white p-5 rounded-md">Cell 1</div>
<div class="bg-white p-5 rounded-md">Cell 2</div>
<div class="bg-white p-5 rounded-md">Cell 3</div>
<div class="bg-white p-5 rounded-md">Cell 4</div>
<div class="bg-white p-5 rounded-md">Cell 5</div>
<div class="bg-white p-5 rounded-md">Cell 6</div>
<div class="bg-white p-5 rounded-md">Cell 7</div>
<div class="bg-white p-5 rounded-md">Cell 8</div>
</div>

For large screens, you’ll add the lg modifier, and for medium screens, it’s md.

Now, you can choose to add an sm modifier for small screens, but it’s not necessary, as the grid-cols-1 class will automatically be applied.

Flexbox & Grid

Grid Template Columns
Utilities for specifying the columns in a grid layout.

Quick reference
Class
Properties
grid-cols-1 grid-template-columns: repeat(1, minmax(0, 1fr));
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;

Basic usage
Specifying the columns in a grid
Use the grid-cols-* utilities to create grids with n equally sized columns.

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

Subgrid
Use the grid-cols-subgrid utility to adopt the column tracks defined by the item’s parent.

<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>