How can we help you today?

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:


panel by default


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.


panels side by side


TABLE OF CONTENTS


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.


Sample Document library


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:


Edit


Click the ShortPoint tag:


ShortPoint tag


Select the pencil icon:


pencil icon


Click the Switch to Grid Mode icon:


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:


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.

Sample Document library


Navigate to the Connect tab:


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:


Current Site


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


List / Library drop-down


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


View drop-down


Click Connect:


Connect


Step 4: Customize the look of the Panel Design Element


Navigate to the Design tab:


Design tab


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


Style and color


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: 

Color column

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

link icon


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


link icon


Modify the Height according to your preference:


Height


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. 


Navigate to the Content tab:


content tab


Select the Code view icon:


code view icon


Paste the copied code in the field provided:


paste code


Click the Code View icon again:


code view icon


Then, click Update:


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:


Row


Navigate to the Custom CSS tab:


Custom CSS tab


Paste the Custom CSS in the field provided:


Custom CSS


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


Preview


Once satisfied, click Update:


Update


Step 8: Save


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



Click Save to apply all changes:


Save


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


Related articles:















Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 52 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more