Skip to main content

Layouts | Grid System

The grid system in Tailwind CSS is a flexible and easy-to-use way to create responsive layouts for your web applications. It allows you to specify the width and height of your elements using a set of predefined classes.

One of the key features of the Tailwind CSS grid system is the use of fractional widths, which allows you to create flexible layouts that automatically adjust to the available space. For example, you can use the w-1/2 class to make an element take up half of the available width, and the w-1/3 class to make it take up one-third of the available width.

In addition to the w-* classes, Tailwind CSS also provides a number of other classes for controlling the layout of your elements.

h-*: These classes control the height of an element. For example, h-12 would make the element 12 units tall.

flex: This class applies the flex layout to an element, which allows you to control the alignment, direction, and order of its child elements.

inline-flex: This class applies the inline-flex layout to an element, which is similar to flex, but allows the element to be placed inline with other elements.

items-start, items-center, items-end: These classes align the child elements within a flex container along the cross axis.

justify-start, justify-center, justify-end: These classes align the child elements within a flex container along the main axis.

grid: This class applies the grid layout to an element, which allows you to create a grid of rows and columns for arranging your elements.

gap-*: These classes add space between the rows and columns in a grid.