Example Of Salesforce SLDS Grid

The Salesforce Lightning Design System (SLDS) incorporates a versatile grid system, enabling the creation of responsive layouts for webpages and applications. Below is an illustration of utilizing the grid system to establish a three-column layout for a webpage:

<div class="slds-grid slds-wrap">
    <div class="slds-col slds-size_1-of-3">
        <!-- Content for first column goes here -->
    </div>
    <div class="slds-col slds-size_1-of-3">
        <!-- Content for second column goes here -->
    </div>
    <div class="slds-col slds-size_1-of-3">
        <!-- Content for third column goes here -->
    </div>
</div>

In this instance, the slds-grid class establishes a container for the columns, while the slds-wrap class ensures that the columns wrap to the next line when the screen size falls below a specified breakpoint. Each individual column is designated by the slds-col class, and the slds-size_1-of-3 class determines the column’s width as one-third of the total grid.

For diverse layouts, you have the flexibility to modify the number of columns and their widths. For instance, a 2-column layout can be created using slds-size_1-of-2 for each column, or a 4-column layout can be achieved by employing slds-size_1-of-4 for each column.

Furthermore, adjustments to the column layout at different breakpoints can be made using classes like slds-medium-size_1-of-2 or slds-large-size_1-of-2.

<div class="slds-grid slds-wrap">
    <div class="slds-col slds-size_1-of-3 slds-medium-size_1-of-2 slds-large-size_1-of-1">
        <!-- Content for first column goes here -->
    </div>
    <div class="slds-col slds-size_1-of-3 slds-medium-size_1-of-2 slds-large-size_1-of-1">
        <!-- Content for second column goes here -->
    </div>
    <div class="slds-col slds-size_1-of-3 slds-medium-size_1-of-2 slds-large-size_1-of-1">
        <!-- Content for third column goes here -->
    </div>
</div>

In this illustration, the initial column width defaults to one-third of the total grid. However, it dynamically adjusts: it becomes half of the total grid when the screen width falls between the medium and large breakpoints, and it expands to occupy the entire grid when the screen width surpasses the large breakpoint.

Feel free to explore various combinations of grid classes to craft the specific layout you envision for your webpage or application.