Slds Grid

admin

Search Submit your search query. What's New; Getting Started; Platforms. Overview; Styling Hooks; Visualforce. Slds-gridalign-end: Columns start on the opposite end of the grid's main axis: slds-gridalign-space: Columns are evenly distributed with equal space around them all: slds-gridalign-spread: Columns align to the left and right followed by center. Space is equal between them: slds-gridvertical-align-center. Lightning Layout. GitHub Gist: instantly share code, notes, and snippets.

  1. Slds Grid Row
  2. Salesforce Slds
  3. Slds Grid Salesforce
  4. Slds Wrap

Advantages of Using Grid System Sizing. Each cell by default has the same size, i.e. Height, width, and they size to fit by default. In the LDS, to get automatic sizing you can specify the slds-col within each slds-grid, and sizing is taken care automatically. A) gridsystem B) slds-grid-system C) grid D) slds-grid Unit 4: Working with Salesforce Data Populating a Data Table with Dynamic Data We recommend the use of Remote Objects, JavaScript Remoting or the REST API to access Salesforce data from your Visualforce pages based on Design System markup.

Slds grid padding

After completing this module, you’ll be able to:

  • Break down a project into digestible pieces.
  • Utilize the Lightning Design System to rapidly prototype.
  • Create a prototyping environment inside Salesforce.

Note

As of Spring '19 (API version 45.0), you can develop Lightning components using two programming models: the Lightning Web Components model and the original Aura Components model. In this module, we create an Aura component. To learn about Lightning Web Components, see Build Lightning Web Components Trail.

Starting with a blank page can be daunting. Luckily we have the screens our designers created to help get us started. We use them to break the content into a set of columns to give our layout a grid system.

Ask yourself, is it one large column, or a 1/3–2/3 setup? Is there a header across the top that takes up the full width?

  1. 1/3 width column
  2. 2/3 width column

Once that’s done, let’s break down the design further into components, like tab sets, data tables, or cards. This is best done using the Lightning Design System.

Use the Lightning Design System to Your Advantage

By using the Salesforce Lightning Design System (SLDS), we can translate the different sections of the designers’ screens to specific Lightning components that will make development easier.

The design system offers code blocks for many common user interface components, such as data tables, tab sets, and cards. In addition, there are also base lightning components available through Salesforce that we can use without needing to worry about the underlying code. By using both the Lightning Design System and the base lightning components, we can map each portion of the design to components and plan for the pieces that have to be custom made. This lets us put more of our energy toward the implementation.

  1. Vertical Navigation Component
  2. SLDS Grid
  3. Card component

Now let’s create an application inside our Trailhead Playground where we'll implement our prototype. Create a new Trailhead Playground for this module. Using an existing org might create problems when you check the challenge.

By using the Lightning Design System and base lightning components, we can quickly produce a prototype to share with stakeholders.

Slds

Create an Application to Host Our Prototype

We create our prototype over 5 steps. Follow along in your Trailhead Playground.

Step 1: Create a Search Proto app in your org

  1. From Setup, enter App Manager in the Quick Find and select App Manager.
  2. Click New Lightning App.
  3. Name the app Search Proto. Clicking on the Developer Name input will auto fill the Developer name to Search_Proto, leave as is.
  4. Click Next.
  5. Leave Standard navigation selected, then click Next.
  6. Click Next again (we don’t need a utility bar).
  7. We’re not going to add any items to our app yet, so leave Selected Items blank and click Next.
  8. Highlight all Available Profiles and click the Add icon to move them to Selected Profiles.
  9. Click Save & Finish.

Step 2: Create a Search Results page using the Lightning App Builder

  1. From Setup, enter Lightning App Builder in the Quick Find and select Lightning App Builder.
  2. Click New to add a new lightning app.
  3. Select App Page and click Next.
  4. Name the page: Search Results.
  5. Select the Header and Left Sidebar layout and click Finish.

Step 3: Edit the Search Results page

  1. In the page editor, use the view selector dropdown at the top of the page and choose Desktop.
  2. Click Save and then Activate.
  3. (Optional) Change the app icon.
  4. Under the Lightning Experience tab, click our Search Proto app, and then click Add page to app.
  5. Click Save.
  6. Click Back in the top right corner of the page.
  7. Click the App Launcher and select Search Proto.

You should now see a blank Search Results page in your Search Proto app as one of the app’s tabs.

Step 4: Use Developer Console and Lightning Design System to make a custom component

  1. Click the setup gear icon and choose Developer Console.
  2. In Developer Console, select File › New › Lightning Component.
  3. Enter VerticalNavigation as the name.
  4. Select all the configuration option checkboxes.
  5. Click Submit.
  6. Replace the placeholder code with the following code for the vertical navigation:

Click File > Save.

Step 5: Use Base Lightning Components to create another custom component

Grid
  1. Still within the Developer Console, select File › New › Lightning Component.
  2. Enter ResultsSection as the name.
  3. Select all the configuration option checkboxes.
  4. Click Submit.
  5. Replace the placeholder code with the following code for section headings:

Slds Grid Row

For each section’s content, we add a set of lightning:card components inside the empty <div> tags. Let’s focus on the Account cards for now. After the comment saying <!-- REPLACE THIS WITH THE CODE FOR ACCOUNT CARDS -->, add the following code:

Click File > Save.

Step 6: Add our components to the page in the page editor

Slds

Salesforce Slds

  1. Back in your org on the Search Results page, click the setup gear icon and choose Edit Page.
  2. In the Page Editor, look for VerticalNavigation and ResultsSection components under Custom components.
  3. Drag the VerticalNavigation component into the left sidebar (the narrow column) of our page.
  4. Drag the ResultsSection component into the main body (the wide column) of our page.
  5. Click Save, then click Back.
  6. Now you should see your Search Results page look like this:

Resources

Slds Grid Salesforce

gridAndLayoutSampleApp.cmp
<aura:application extends='force:slds'>
<!-- Pure HTML and SLDS Grid -->
<div>Pure HTML and SLDS Grid</div>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>
<div>
<div>6</div>
<div>7</div>
</div>
</div>
</div>
<!-- Lightning Layout and LayoutItem Components -->
<div>Lightning Layout and LayoutItem Components</div>
<lightning:layout horizontalAlign='spread' multipleRows='true'>
<lightning:layoutItem padding='around-small' flexibility='grow' size='12'>1</lightning:layoutItem>
<lightning:layoutItem padding='around-small' flexibility='grow' size='8' mediumDeviceSize='10' largeDeviceSize='8'>2</lightning:layoutItem>
<lightning:layoutItem padding='around-small' flexibility='grow' size='4' mediumDeviceSize='2' largeDeviceSize='4'>3</lightning:layoutItem>
<lightning:layoutItem padding='around-small' flexibility='grow' size='4' mediumDeviceSize='6' largeDeviceSize='4'>4</lightning:layoutItem>
<lightning:layoutItem padding='around-small' flexibility='grow' size='4' mediumDeviceSize='6' largeDeviceSize='4'>5</lightning:layoutItem>
<lightning:layoutItem flexibility='grow' size='12' largeDeviceSize='4'>
<lightning:layout horizontalAlign='spread' multipleRows='true'>
<lightning:layoutItem padding='around-small' flexibility='grow' size='6' mediumDeviceSize='12' largeDeviceSize='6'>6</lightning:layoutItem>
<lightning:layoutItem padding='around-small' flexibility='grow' size='6' mediumDeviceSize='12' largeDeviceSize='6'>7</lightning:layoutItem>
</lightning:layout>
</lightning:layoutItem>
</lightning:layout>
</aura:application>

Slds Wrap

gridAndLayoutSampleApp.css

commented Apr 12, 2017

Do not forget to add the CSS file or you will not be able to see the responsive content.

commented May 8, 2018

Thank you for making this available, it helps a lot!

commented Dec 12, 2019

What's the point of using lightning layout when I still need to know how slds-grid works - it contains more markup and is basically the inner platform anti-pattern https://en.wikipedia.org/wiki/Inner-platform_effect

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment