Salesforce SLDS Grid Example: DevFacts Blog

Salesforce SLDS Grid Example

Salesforce Lightning Design System (SLDS) is a set of guidelines and resources that enable developers to create user interfaces consistent with the Salesforce Lightning Experience. One of the key components of SLDS is the Grid system, which allows developers to create responsive and consistent layouts for their applications. In this article, we will explore a simple example of how to use the SLDS Grid system in a Salesforce application.

To get started, let’s consider a hypothetical scenario where we need to build a simple web page to display a list of contacts in a Salesforce application. We want the page to display three columns of contacts on desktop devices, and two columns on smaller devices such as tablets and smartphones.

To achieve this layout, we can use the SLDS Grid system. The Grid system in SLDS is based on a 12-column layout, and it allows developers to define the size and position of elements within a grid. The grid system uses a combination of CSS classes to define the layout, and it is designed to be fully responsive, so that the layout adjusts automatically based on the size of the device.

Here is an example of how we can use the SLDS Grid system to create the desired layout for our contact list page:

“`html

“`

In this example, we use the `slds-grid` and `slds-wrap` classes to create a grid layout that wraps to the next line when it reaches the end of the container. Inside the grid, we use the `slds-col` class to define each column, and we use the `slds-size_1-of-1`, `slds-medium-size_1-of-2`, and `slds-large-size_1-of-3` classes to specify the size of each column for different device sizes.

By using these SLDS Grid classes, we can easily create a responsive and consistent layout for our contact list page that looks great on any device.

In conclusion, the Salesforce SLDS Grid system is a powerful tool for building responsive and consistent layouts in Salesforce applications. By using the SLDS Grid classes, developers can easily create complex grid layouts that automatically adjust to different device sizes. The example provided in this article demonstrates how to use the SLDS Grid system to create a simple but effective layout for displaying a list of contacts in a Salesforce application.