The Salesforce Lightning Design System (SLDS) includes a flexible grid system that can be used to create responsive layouts for webpages and applications. Here is an example of how the grid system can be used to create 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 example, the slds-grid class is used to create a container for the columns, and the slds-wrap class is used to ensure that the columns wrap to the next line when the screen size is below a certain breakpoint. The slds-col class is used for each individual column, and the slds-size_1-of-3 class is used to define the column’s width as 1/3 of the total grid.

You can adjust the number of columns, and their widths to create different layouts. For example, you can create a 2-column layout by using slds-size_1-of-2 for each column, or a 4-column layout by using slds-size_1-of-4 for each column.

Also, you can use the slds-medium-size_1-of-2 or slds-large-size_1-of-2 classes to change the layout of a column at different breakpoints.

<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 example, the first column width is 1/3 of the total grid by default, it will become 1/2 of the total grid when the screen width is between medium breakpoint and large breakpoint and it will be 1/1 of the total grid when the screen width is larger than the large breakpoint.

You can experiment with different combinations of grid classes to create the desired layout for your webpage or application.