Grid

Learn about grids, and how to best use them in the Base System

1.0 Grids

Grids in the base system are a utility class that provide pre-applied properties for common grid layouts and spacing. Browse the starting utility classes and their properties in the table below. Learn more about how sections are used in your layouts through the structure overview page.

2.0 Grid Classes

Class Name	Columns	Column Gap
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}

If your layout requires additional styles and can't be achieved effective with the foundation classes, simply duplicate a column class and create a custom (eg. Pricing Grid Small)

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