Additional Structure
Last updated
Last updated
Max Width Classes give your project elements a consistent width. 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. 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.
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.
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
Grids in the Base System are utility classes designed to streamline the creation of common grid layouts and spacing. These pre-applied properties simplify the process of building structured, responsive designs, saving time and ensuring consistency. Grids are often unique in their nature, and like everything in the Base System we provide you a framework to create scalable and consistent layouts even when things get unique.
Grids in the Base System are utility classes designed to streamline the creation of common grid layouts and spacing. These pre-applied properties simplify the process of building structured, responsive designs, saving time and ensuring consistency.
Refer to the table below to explore the starting utility classes and their associated properties. For additional insights into integrating grids with your layouts, review the Structure Overview.
Grids are an essential tool for creating structured and responsive layouts in the Base System. They allow you to arrange elements in rows and columns efficiently, providing flexibility for various design requirements. Grid utility classes come with pre-applied properties for common layouts, ensuring consistency and saving time. These classes simplify the process of building responsive designs by controlling column layouts and spacing.
Grid classes are applied directly to the Grid Element in Webflow, offering predefined styles for columns and column gaps. These default styles serve as a starting point and can be adjusted as needed to suit your specific layout requirements. For example, a Grid Three Column class can be used to create a three-column layout with evenly spaced columns.
By leveraging these utility classes, you can maintain a clean and consistent grid structure while allowing for customization when unique designs demand it.
Class naming for grids follows a consistent methodology aligned with other structural elements in the Base System. For a deeper understanding of the naming conventions, refer to the general class naming philosophy.
Default Grids: Default grid classes use descriptive names based on the number of columns.
Examples: Grid One Column, Grid Three Column, Grid Five Column.
Custom Grids: For custom grids, append "Grid" as a suffix to the parent category.
Examples: Testimonial Grid, Pricing Card Grid.
This table outlines the default classes and their values included in the Base System. Customize these classes or add new ones to suit your needs.
Grid One Column
1
16px
Grid Two Column
2
16px
Grid Three Column
3
16px
Grid Four Column
4
16px
Grid Five Column
5
16px
{Custom} Grid
{Custom}
{Custom}
The Title Wrapper is a utility class used to wrap and style titles on a webpage. The primary purposes of a Title Wrapper are to apply consistent styling, enhance the visual hierarchy of your content, and ensure that titles are displayed prominently and attractively.
Browse the starting utility classes and their properties in the table below.
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.
Title Column Small
Vertical
580px
44px
Title Column Regular
Vertical
740px
62px
Title Column Large
Vertical
960px
92px
{Custom} Title Column
{Custom}
{Custom}
Auto
