Tailwind CSS Layout Classes

Tailwind CSS provides a rich set of layout-related classes that allow developers to control every aspect of a page with great flexibility.

Next, we will explain in detail some key layout-related classes.

1. Aspect Ratio

The Aspect Ratio classes help you set the aspect ratio of an element, preventing it from stretching or compressing in responsive design.

Main classes:

2. Container

The Container class makes container elements responsive to different screen sizes, commonly used to set the maximum width of content.

Main classes:

• container: Makes the element a responsive container.
• mx-auto: Centers the container horizontally.

When using these classes, you can create containers with responsive maximum widths, which is very useful when creating layouts, especially when you want to limit the width of content to improve readability.

In these examples, the first<div>will always occupy 100% of the width, while the second<div>on large screens (lg) and above, its maximum width will be limited to 1024px.mx-autoThe class is used to center the container horizontally.

3. Columns

The Columns classes are used to implement multi-column layouts.

You can control the number of columns and the spacing between columns.

Main classes:

• columns-{n}: Sets the number of columns.
• space-x-{size}: Sets the spacing between columns.

4. Pagination

The following classes help developers better control the pagination and column layout of documents, to improve the readability and aesthetics of print output.

Main classes:

• break-after-{value}: Controls the behavior after a page/column break.
• break-before-{value}: Controls the behavior before a page/column break.
• break-inside-{value}: Controls the behavior of breaks inside an element.

The above classes are used to control the pagination or column-break behavior of content in print or multi-column layouts:

• break-after-autoAllows the browser to decide whether to break after the element.
• break-after-avoidTells the browser to avoid breaking after the element as much as possible.

The above classes are used to control the pagination or column-break behavior of content in print or multi-column layouts.

• break-before-autoAllows the browser to decide whether to break before the element.
• break-before-avoidTells the browser to avoid breaking before the element as much as possible.

The above classes are used to control whether content is allowed to break inside an element in print or multi-column layouts.

• break-inside-autoAllows the browser to decide whether to break inside the element.
• break-inside-avoidTells the browser to avoid breaking inside the element as much as possible.

In this example,<div>the element is set to a two-column layout (columns-2), which contains four<p>paragraphs. The second<p>paragraph has abreak-after-columnclass, which forces a column break after that paragraph but does not allow a page break. This means that if there is enough content, the content after the second paragraph will start a new column, rather than continuing on the next line of the same column. The other paragraphs have no special column-breaking directives, so they will flow naturally according to their content.

5. Text Break

The following are the utility classes in Tailwind CSS used to control how element fragments are rendered across multiple lines, columns, or pages, along with their corresponding CSS properties:

The above classes are used to control how an element's decorations (such as borders and backgrounds) behave in multi-column layouts or when paginated.

• box-decoration-cloneCauses each box fragment to display the complete decoration.
• box-decoration-slice"Slices" the decoration at the point where the box is split, keeping the decoration visually continuous.

These utility classes help developers better control the visual appearance of elements in complex layouts.

6. Box Sizing

Tailwind CSS provides two utility classes to control an element's box model (box-sizing):

• box-border: Calculates the element's total size including padding and borders.
• box-content: Calculates the element's size excluding padding and borders.

1、box-border

CSS property:

box-sizing: border-box;

Use the box-border utility class to set the element's box-sizing property to border-box. This means that when you specify a height or width for the element, the browser includes the element's borders and padding within that size.

If an element's size is 100px × 100px, with a 2px border and 4px padding, the total rendered size of the element will be 112px × 112px.

2、box-content

CSS property:

box-sizing: content-box;

Use the box-content utility class to set the element's box-sizing property to content-box. This means the browser adds borders and padding on top of the element's specified width or height.

If an element's size is 100px × 100px, with a 2px border and 4px padding, the element's actual rendered size will be 112px × 112px, with an inner content area of 100px × 100px.

display property

The display property is used to control the display type of an element, determining how the element is shown on the page.

Use the table, table-row, table-cell, table-caption, table-column, table-column-group, table-header-group, table-row-group, and table-footer-group utility classes to create elements that behave like their corresponding table elements.

Float

float-*Controls the floating position of an element, often used for wrapping text around it.

Main classes:

Clear Float

The utility classes in Tailwind CSS for controlling how an element clears floats, along with their corresponding CSS properties:

isolate

These utility classes allow developers to control the stacking context behavior of an element, thereby affecting how the element and its descendants participate in stacking order.

The isolate class helps create an isolated environment in which the element's stacking order is not affected by outside elements, while isolation-auto allows the browser to handle the stacking context according to default rules.

Use the isolate and isolation-auto utility classes to control whether an element should explicitly create a new stacking context.

object-fit

The following are the utility classes used to control how replaced element content is scaled, along with their corresponding CSS properties:

Use object-cover to size the element's content to cover its container: