Flexbox & Grid

Controls the direction in which flex items are placed in the flex container. This is fundamental for responsive layouts where you might want elements to stack vertically on mobile but appear side-by-side on larger screens. The flex direction utility is often your starting point when building a flex-based layout and works alongside other flex utilities like justify-content and align-items.

Controls whether flex items should wrap onto multiple lines or be forced into a single line. This is essential for responsive design, allowing items to adapt to different screen sizes by either wrapping to new lines when space is limited or maintaining a single row or column. Flex wrap works with flex-direction to determine the layout behavior.

Sets how a flex item grows or shrinks to fit available space. This shorthand combines flex-grow, flex-shrink, and flex-basis into a single declaration, controlling how items resize within their container. Understanding the flex utility is key to creating responsive, flexible layouts where elements adapt properly to different screen sizes and content amounts.

Controls the ability of a flex item to grow when there is extra space in the flex container. This utility helps distribute available space proportionally between flex items. Items with higher grow values receive a larger portion of the available space. In Tailwind v4, flex-grow utilities work better with other layout features and responsive variants.

Controls the ability of a flex item to shrink when there isn't enough space in the flex container. This is crucial for responsive designs, determining how items behave when space becomes limited. Items with higher shrink values will reduce their size more aggressively when needed. In Tailwind v4, flex-shrink utilities have improved responsive behavior.

Controls the order in which flex or grid items appear within their container, regardless of their source order in the HTML. This is powerful for responsive designs, allowing you to rearrange elements based on screen size without changing the HTML structure. In Tailwind v4, order utilities have improved integration with other layout systems and better accessibility considerations.

Defines the columns in a CSS Grid layout. This utility allows you to create complex, two-dimensional layouts with precise control over both rows and columns. Grid Template Columns sets up the horizontal tracks in your grid, defining how many columns you want and how they should size themselves. In Tailwind v4, grid utilities have enhanced support for modern features like subgrid and masonry layouts.

Controls how an element spans across columns in a CSS Grid. Using grid-column-start and grid-column-end (or the shorthand grid-column), you can position items precisely within a grid, making them span multiple columns, or place them in specific column tracks. Combined with responsive variants, this provides powerful control over complex layouts at different screen sizes.

Defines the rows in a CSS Grid layout, allowing you to control the vertical tracks in your grid. While grid-template-columns handles the horizontal structure, grid-template-rows governs the height of each row. This is essential for creating well-defined grid layouts where you need control over both dimensions. In Tailwind v4, row utilities have improved compatibility with container queries and logical properties.

Controls how an element spans across rows in a CSS Grid. Similar to grid-column utilities, grid-row-start and grid-row-end (or the shorthand grid-row) let you position items vertically within a grid. This allows for precise placement and spanning across multiple rows. When combined with responsive variants, you gain powerful control over complex layouts that adapt to different screen sizes.

Controls how the auto-placement algorithm works in CSS Grid, determining how items that aren't explicitly placed are automatically arranged. This utility helps manage the flow direction and density of automatically placed grid items. In Tailwind v4, grid-auto-flow utilities have improved compatibility with other grid features like grid-template-areas.

Sets the size of implicitly created columns in a CSS Grid. While grid-template-columns defines explicit columns, grid-auto-columns controls the sizing of automatically generated columns that aren't explicitly defined. This is particularly useful for grids where the number of columns may vary or when using grid-auto-flow: column to create columns dynamically.

Sets the size of implicitly created rows in a CSS Grid. Similar to grid-auto-columns, this utility controls the sizing of automatically generated rows that aren't explicitly defined with grid-template-rows. This is essential for grids with dynamic content where the number of rows isn't known in advance or when using grid-auto-flow: row.

Controls the spacing between rows and columns in grid and flexbox layouts. This utility provides a clean, consistent way to create gutters between elements without using margins that might cause layout issues. In Tailwind v4, gap utilities work with all layout modes and have improved compatibility with other spacing utilities.

Controls how items are positioned along the main axis of a flex or grid container. For a flex row, this is horizontal alignment; for a flex column, this is vertical alignment. This utility is fundamental for distributing space and aligning items within containers. In Tailwind v4, justify utilities have improved compatibility with logical properties for better RTL support.

Controls alignment of grid items along their inline (row) axis within their grid areas. While justify-content controls the alignment of the entire grid container's contents, justify-items controls individual grid items within their cells. This is particularly useful for grid layouts where you want consistent alignment of items within their allocated spaces.

Controls the alignment of an individual grid item along the inline (row) axis within its grid cell. While justify-items applies to all items in a grid, justify-self lets you override that behavior for specific items. This gives you precise control over the horizontal positioning of individual elements in a grid layout.

Controls how rows of content are positioned in a multi-line flex container or a grid container along the cross axis. In a flex column layout, this controls horizontal alignment; in a flex row layout, this controls vertical alignment. This is particularly useful when there are multiple rows of content with extra space in the container. In Tailwind v4, align utilities have improved compatibility with logical properties for better RTL support.

Controls how flex or grid items are aligned along the cross axis of their container. In a flex row layout, this governs vertical alignment; in a flex column layout, this controls horizontal alignment. This utility is essential for controlling how items align in relation to each other within a row or column. In Tailwind v4, align utilities have improved compatibility with logical properties for better RTL support.

Controls how an individual flex or grid item is aligned along the cross axis, overriding the container's align-items setting. This utility allows for precise control over the alignment of specific items within a flex or grid container, letting you create exceptions to the overall alignment pattern. In Tailwind v4, align-self utilities have improved compatibility with logical properties for better RTL support.

A shorthand utility that sets both align-content and justify-content properties at once. This makes it quicker to center or distribute space for content in both dimensions within a flex or grid container. In Tailwind v4, place utilities have improved compatibility with logical properties for better RTL support and work seamlessly with other layout features.

A shorthand utility that sets both align-items and justify-items properties at once. This allows for quick positioning of all grid or flex items within their individual areas or cells. Place-items is particularly useful in grid layouts where you want consistent alignment behavior in both dimensions. In Tailwind v4, place utilities work seamlessly with other layout properties and have improved RTL support.

A shorthand utility that sets both align-self and justify-self properties at once. This allows for positioning an individual grid or flex item within its grid area or flex line, overriding the container's place-items settings. Place-self is perfect for creating exceptions to the overall alignment pattern without needing separate utilities for each axis. In Tailwind v4, place-self utilities have better RTL language support and improved compatibility with other layout properties.