How to Display 2, 3 or 4 Connected Panels on the same Row

By default, when you add several Panels in a Row, they will be stacked on top of each other:

If you want to display the Panels in the same row beside each other, like the image below, this is the article for you. Follow the steps in this guide to get started.

TABLE OF CONTENTS

• Prerequisite
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Edit the Panel Design Element
  • Step 3: Connect the Panel Design Element to SharePoint List / Library
  • Step 4: Customize the look of the Panel Design Element
  • Step 5: Set up Content
  • Step 6: Copy Custom CSS
  • Step 7: Paste Custom CSS 
  • Step 8: Save

Prerequisite

• You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.
• You must have an existing Panel Design Element on your page.
• You must have a SharePoint Library / List that contains the data you wish to render using the Panel Design Element.

Step-by-step Tutorial

Follow the steps below to learn how to display Panels beside each other:

Step 1: Edit the ShortPoint Web Part

Go to the SharePoint page you want to use and click Edit:

Click the ShortPoint tag:

Select the pencil icon:

Click the Switch to Grid Mode icon:

Step 2: Edit the Panel Design Element

NOTEBefore proceeding, make sure you already have a Panel Design Element on your page.

Go to the Panel Design Element you want to use and click the cogwheel icon:

Step 3: Connect the Panel Design Element to SharePoint List / Library

NOTEMake sure you already have a SharePoint Library / List that contains the data you wish to render using the Panel Design Element.

Navigate to the Connect tab:

Select the connection type you prefer. You can choose from Current Site, Other Sites, or SharePoint Site URL. For this guide, however, we will use Current Site:

In the List / Library drop-down, find the name of your SharePoint List / Library and select it:

Select your preferred View. For this guide, we will use the default All Documents view:

Click Connect:

Step 4: Customize the look of the Panel Design Element

Navigate to the Design tab:

Select the [1] Style and [2] Color you prefer:

NOTEIf you wish to use different colors for each panel, make sure to add a Color column on your SharePoint List / Library and add the hexcode you prefer for each panel: 


Then, in the Color field, click the [1] link icon and select [2] Color:

In the Title field, click the [1] Link icon and select [2] File Name:

Modify the Height according to your preference:

Step 5: Set up Content

Copy the code below:

<img src="#FileRef"/><br/><br/>
#Description <br/><br/>
<a href="#_SHORTPOINT_DisplayItemURL">Read more</a>

NOTEYou can change #Description depending on the name of the column you wish to render. 

Select the Code view icon:

Paste the copied code in the field provided:

Click the Code View icon again:

Then, click Update:

Step 6: Copy Custom CSS

Copy any of the following CSS codes (based on how many panels you wish to display on the same row):

• 2 panels on the same row

.sp-type-column {
  display: grid;
  grid-template-columns: repeat(2, calc(50% - 15px));
  gap: 15px;
}

.shortpoint-panel {
  margin-bottom: 15px;
  box-sizing: border-box;
}

/* Media query for smaller screens */
@media (max-width: 767px) {
  .sp-type-column{
    grid-template-columns: 100%; /* Single column on smaller screens */
  }
}

• 3 panels on the same row

.sp-type-column {
  display: grid;
  grid-template-columns: repeat(3, calc(33.33% - 15px));
  gap: 15px;
}

.shortpoint-panel {
  margin-bottom: 15px;
  box-sizing: border-box;
}

/* Media query for smaller screens */
@media (max-width: 767px) {
  .sp-type-column{
    grid-template-columns: 100%; /* Single column on smaller screens */
  }
}

• 4 panels on the same row

.sp-type-column {
  display: grid;
  grid-template-columns: repeat(4, calc(25% - 15px));
  gap: 15px;
}

.shortpoint-panel {
  margin-bottom: 15px;
  box-sizing: border-box;
}

/* Media query for smaller screens */
@media (max-width: 767px) {
  .sp-type-column{
    grid-template-columns: 100%; /* Single column on smaller screens */
  }
}

NOTEAs you may notice, the code snippets above are exactly the same, except for the line: grid-template-columns: repeat(4, calc(25% - 15px)); You can customize this line according to your preference. For example, 4 can be replaced by the number you'd like to display in a row. 25% is calculated by dividing 100% to the number of items you want to display. Finally, 15px is the space between items and can be adjusted according to your preference. So, if you want to display 5 items in a row, you should have this line of code: grid-template-columns: repeat(5, calc(20% - 15px));

Step 7: Paste Custom CSS 

Go to the Row where the Panel Design Element you edited is located and click the cogwheel icon:

Navigate to the Custom CSS tab:

Paste the Custom CSS in the field provided:

Click Preview to see how your Row will look in real-time:

Once satisfied, click Update:

Step 8: Save

Click the eye icon to see how your page will look:

Click Save to apply all changes:

Congratulations! You can now display Panels beside each other in a single row.

Related articles:

• How to Change the Panel Title Alignment (to Center or Right)
• How to Make Rounded Corners for ShortPoint Panel
• How to Make Rounded Corners for ShortPoint Tiles