Max Widths

Learn about max-widths, and how to best use them in the Base System

1.0 Max Widths

Max Widths are essential utility classes designed to define the maximum width of elements, ensuring they don't exceed a specified size. These classes are frequently used to control the layout's responsiveness and visual balance. The default max width values can be customized to meet the specific needs of your projects.

2.0 Max Width Classes

Explore the default classes and properties below. You can customize these to fit your needs or create a new custom class tailored to your style preferences.

Class Name	Max Width
Max Width X Small	340px
Max Width Small	472px
Max Width Regular	604px
Max Width Large	736px
Max Width X Large	868px
{Custom} Max Width	X

3.0 General Usage

3.1 Element Type

Grid classes are applied to the Grid Element in Webflow, and are bundled with some simple styles for columns and column gap. These styles can be adjusted to suit your own requirements.

3.2 Class Naming

Class naming for spacing follows a similiar approach to other structure elements. You can learn more about the general philosophy of class naming here.

• Sections: Default sections use descriptive names based on the top and bottom padding.

  • Example: Grid One Column, Grid Three Column, Grid Five Column

• Custom Sections: Use section as a suffix to the parent category

  • Example: Testmonial Grid, Pricing Card Grid