How to Split a ShortPoint Row into 5 Columns

This article will help achieve a 5 columns layout in a row using Custom CSS.

Step 1: Create a section

Insert a new Section using ShortPoint Page Builder.

Click the Section button, here is how it looks on Modern Pages:

And on Classic Pages:

Step 2: Select the 1/6 Row Layout

Hover over the Row and you will find the Row Layout button. Click it:

Select 6 columns layout for the Row:

Step 3: Remove one column

Remove one of the 6 created columns so the section will have only 5 columns. Hover over the cross and click it to remove:

Step 4: Create a class for the Row

This step will ensure that with our custom CSS code, we will target only the Row that we need and not other Rows in the same Section.

Hover over the Row which will be split into 5 columns and click the Row cog wheel:

After the settings of the Row are opened, go to the Custom CSS tab and create a Class for it as shown below:

Press Update.

Step 5: Make the columns equal with custom CSS

Hover over the section to find the Section settings cog wheel:

Switch to Custom CSS tab.

Add the following code to Custom CSS tab in the created Section to make the 5 columns equal in width.

.target-row {
  display:flex;
}
.target-row .shortpoint-col {
  flex-basis:20%;
}

Step 6: Align to center

While still in the Section settings, open the Settings tab and set the Horizontal Alignment to Center, and then click Publish:

That's it! Now the Section has 5 equal columns:

Related Articles:

• How to make Fixed background Image on Sections/Rows
• Page Layout
• Managing SharePoint Page Layout Using ShortPoint Sections (Classic Experience)