{"id":57697,"date":"2016-08-25T07:08:29","date_gmt":"2016-08-25T07:08:29","guid":{"rendered":"http:\/\/webkul.com\/blog\/?p=57697"},"modified":"2016-12-28T11:06:48","modified_gmt":"2016-12-28T11:06:48","slug":"grid-in-lightning-design-system","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/grid-in-lightning-design-system\/","title":{"rendered":"Grid In Lightning Design System"},"content":{"rendered":"

Salesforce has introduced Lightning Design System<\/strong> which provides built-in styling that allows a developer to focus more on functionality to enhance the developing experience. By using it, when we develop apps in salesforce, the apps are feasible with lightning experience. The focus now is to understand Grid In Lightning Design System<\/strong>.<\/p>\n

\n
\n

Create a customized scoped CSS file to use<\/h3>\n<\/div>\n
\n

Before acknowledging grid in lightning design system, it is mandatory to create a customized scoped CSS file to get access of the helper classes which are predefined. Following steps are required for the same-<\/p>\n

Step 1:<\/strong> Go to the link https:\/\/www.lightningdesignsystem.com\/<\/a><\/p>\n

Step 2:<\/strong> Click Platform>lightning.
\n\"Step1\"<\/a>
\nThe given link in the snapshot is https:\/\/tools.lightningdesignsystem.com\/css-customizer<\/a><\/p>\n

Step 3:<\/strong> Generate a scoping class. You have to use the name of the class you have just mentioned, further in the code.\"Step2\"<\/a><\/p>\n

Step 4:<\/strong> Download the zip file.\"Step3\"<\/a><\/p>\n

Step 5:<\/strong> Include it as static resource.\"Step4\"<\/a><\/p>\n

Or else,<\/p>\n

You can download the attachment given here and add it as static resource.
\nsalesforce-lightning-design-system<\/a><\/p>\n

Now whenever you need to use the static resource. Use the following Nutshell:<\/p>\n

<apex:page showHeader=\"false\" standardStylesheets=\"false\" sidebar=\"false\" applyHtmlTag=\"false\" applyBodyTag=\"false\" docType=\"html-5.0\">\r\n\r\n    <!--\r\n    \/**\r\n     * Webkul Software.\r\n     *\r\n     * @category  Webkul\r\n     * @author    Webkul\r\n     * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https:\/\/webkul.com)\r\n     * @license   https:\/\/store.webkul.com\/license.html\r\n     *\/\r\n    -->\r\n\r\n    <html xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" lang=\"en\">\r\n        <head>\r\n            <meta charset=\"utf-8\" \/>\r\n            <title>Lightning Design System<\/title>\r\n            <meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\" \/>\r\n            <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\r\n            <apex:stylesheet value=\"{!URLFOR($Resource.SLDS, 'assets\/styles\/salesforce-lightning-design-system-vf.min.css')}\"\/><!--Include the stylesheet-->\r\n        <\/head>\r\n        <body class=\"wk_static\"><!--Always write the name of your scoping class in the outermost div-->\r\n        <\/body>\r\n    <\/html>\r\n<\/apex:page><\/pre>\n<\/div>\n<\/div>\n
\n
\n
Grid<\/h3>\n<\/div>\n
\n
Code:<\/strong><\/strong><\/p>\n
<apex:page showHeader=\"false\" standardStylesheets=\"false\" sidebar=\"false\" applyHtmlTag=\"false\" applyBodyTag=\"false\" docType=\"html-5.0\">\r\n\r\n    <!--\r\n    \/**\r\n     * Webkul Software.\r\n     *\r\n     * @category  Webkul\r\n     * @author    Webkul\r\n     * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https:\/\/webkul.com)\r\n     * @license   https:\/\/store.webkul.com\/license.html\r\n     *\/\r\n    -->\r\n\r\n    <html xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" lang=\"en\">\r\n    <head>\r\n      <meta charset=\"utf-8\" \/>\r\n      <title>Lightning Design Grid System <\/title>\r\n      <meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\" \/>\r\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\r\n      <apex:stylesheet value=\"{!URLFOR($Resource.SLDS, 'assets\/styles\/salesforce-lightning-design-system-vf.min.css')}\" \/>\r\n    <\/head>\r\n    <body>\r\n     <div class=\"wk_static\">\r\n        <div class=\"slds-grid\"><!-- Automatic Sizing -->\r\n          <div class=\"slds-col\">\r\n            <div class=\"slds-box slds-box--small slds-theme--shade slds-text-align--center\">col<\/div>\r\n          <\/div>\r\n          <div class=\"slds-col\">\r\n            <div class=\"slds-box slds-box--small slds-theme--shade slds-text-align--center\">col<\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"slds-grid slds-grid--pull-padded\" style=\"margin-top:2rem;\">\r\n          <div class=\"slds-col--padded\">\r\n            <div class=\"slds-box slds-box--small slds-theme--shade slds-text-align--center\">col--padded<\/div>\r\n          <\/div>\r\n          <div class=\"slds-col--padded\">\r\n            <div class=\"slds-box slds-box--small slds-theme--shade slds-text-align--center\">col--padded<\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"slds-grid slds-wrap slds-grid--pull-padded\" style=\"margin-top:2rem;\"><!-- Manual Sizing -->\r\n\r\n          <!--This div will be of whole width on any screen-->\r\n          <div class=\"slds-col--padded slds-size--1-of-1 slds-p-bottom--large\">\r\n            <div class=\"slds-box slds-box--small slds-theme--shade slds-text-align--center\">1<\/div>\r\n          <\/div>\r\n\r\n          <!--This div will be of 1\/2 width on small, 5\/6 width on medium and 8\/12 width on large screen-->\r\n          <div class=\"slds-col--padded slds-size--1-of-2 slds-medium-size--5-of-6 slds-large-size--8-of-12 slds-p-bottom--large\">\r\n            <div class=\"slds-box slds-box--small slds-theme--shade slds-text-align--center\">2<\/div>\r\n          <\/div>\r\n\r\n          <!--This div will be of 1\/2 width on small, 1\/6 width on medium and 4\/12 width on large screen-->\r\n          <div class=\"slds-col--padded slds-size--1-of-2 slds-medium-size--1-of-6 slds-large-size--4-of-12 slds-p-bottom--large\">\r\n            <div class=\"slds-box slds-box--small slds-theme--shade slds-text-align--center\">3<\/div>\r\n          <\/div>\r\n\r\n          <!--This div will be of whole width on small, 1\/2 width on medium and 1\/3 width on large screen-->\r\n          <div class=\"slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--1-of-3 slds-p-bottom--large\">\r\n            <div class=\"slds-box slds-box--small slds-theme--shade slds-text-align--center\">4<\/div>\r\n          <\/div>\r\n\r\n          <!--This div will be of whole width on small, 1\/2 width on medium and 1\/3 width on large screen-->\r\n          <div class=\"slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--1-of-3 slds-p-bottom--large\">\r\n            <div class=\"slds-box slds-box--small slds-theme--shade slds-text-align--center\">5<\/div>\r\n          <\/div>\r\n\r\n          <!--This div will be of whole width on small and 1\/3 width on large screen-->\r\n          <div class=\"slds-col--padded slds-size--1-of-1 slds-large-size--1-of-3\">\r\n            <div class=\"slds-grid slds-wrap slds-grid--pull-padded\">\r\n\r\n              <!--This div will be of 1\/2 width on small, whole width on medium and 1\/2 width on large screen of parent div-->\r\n              <div class=\"slds-col--padded slds-size--1-of-2 slds-medium-size--1-of-1 slds-large-size--1-of-2 slds-p-bottom--large\">\r\n                <div class=\"slds-box slds-box--small slds-theme--shade slds-text-align--center\">6<\/div>\r\n              <\/div>\r\n            <!--This div will be of 1\/2 width on small, whole width on medium and 1\/2 width on large screen of parent div-->\r\n              <div class=\"slds-col--padded slds-size--1-of-2 slds-medium-size--1-of-1 slds-large-size--1-of-2 slds-p-bottom--large\">\r\n                <div class=\"slds-box slds-box--small slds-theme--shade slds-text-align--center\">7<\/div>\r\n              <\/div>          \r\n            <\/div>      \r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/body>\r\n  <\/html>\r\n<\/apex:page><\/pre>\n
Output:<\/strong><\/p>\n
\"Output1\"<\/a><\/p>\n
 <\/p>\n
\"Output2\"<\/a><\/p>\n
 <\/p>\n
\"Output3\"<\/a><\/p>\n<\/div>\n<\/div>\n
 <\/p>\n
\n
\n
<\/i>Support<\/h3>\n<\/div>\n
\n
That\u2019s all for Grid In Lightning Design System, still if you have any further query or seek assistance to make your salesforce classic apps compatible with lightning experience, feel free to add a ticket, we will be happy to help you. https:\/\/webkul.uvdesk.com\/en\/customer\/create-ticket\/<\/a><\/p>\n<\/div>\n<\/div>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Salesforce has introduced Lightning Design System which provides built-in styling that allows a developer to focus more on functionality to enhance the developing experience. By using it, when we develop apps in salesforce, the apps are feasible with lightning experience. The focus now is to understand Grid In Lightning Design System. Create a customized scoped […]<\/a><\/p>\n","protected":false},"author":104,"featured_media":55839,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3545,1887],"tags":[3541,3540],"class_list":["post-57697","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-lightning-design-system","category-salesforce","tag-download-the-resource-lightning-design-system","tag-grid-lightning-design-system"],"yoast_head":"\nGrid In Lightning Design System Salesforce Lightning<\/title>\n<meta name=\"description\" content=\"Grids in lightning design system, provides the user to alter the behavior of the elements by using helper classes which are pre-defined.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/grid-in-lightning-design-system\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Grid In Lightning Design System Salesforce Lightning\" \/>\n<meta property=\"og:description\" content=\"Grids in lightning design system, provides the user to alter the behavior of the elements by using helper classes which are pre-defined.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/grid-in-lightning-design-system\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-08-25T07:08:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-12-28T11:06:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/featureSalesforce-Lightning-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Aakanksha Singh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Aakanksha Singh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/grid-in-lightning-design-system\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/grid-in-lightning-design-system\/\"},\"author\":{\"name\":\"Aakanksha Singh\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/7d54984c6524404eb2ba261ace62da80\"},\"headline\":\"Grid In Lightning Design System\",\"datePublished\":\"2016-08-25T07:08:29+00:00\",\"dateModified\":\"2016-12-28T11:06:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/grid-in-lightning-design-system\/\"},\"wordCount\":243,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/grid-in-lightning-design-system\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/featureSalesforce-Lightning-2.png\",\"keywords\":[\"download the resource lightning design system\",\"grid lightning design system\"],\"articleSection\":[\"Lightning Design System\",\"Salesforce\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/grid-in-lightning-design-system\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/grid-in-lightning-design-system\/\",\"url\":\"https:\/\/webkul.com\/blog\/grid-in-lightning-design-system\/\",\"name\":\"Grid In Lightning Design System Salesforce Lightning\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/grid-in-lightning-design-system\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/grid-in-lightning-design-system\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/featureSalesforce-Lightning-2.png\",\"datePublished\":\"2016-08-25T07:08:29+00:00\",\"dateModified\":\"2016-12-28T11:06:48+00:00\",\"description\":\"Grids in lightning design system, provides the user to alter the behavior of the elements by using helper classes which are pre-defined.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/grid-in-lightning-design-system\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/grid-in-lightning-design-system\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/grid-in-lightning-design-system\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/featureSalesforce-Lightning-2.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/featureSalesforce-Lightning-2.png\",\"width\":825,\"height\":260},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/grid-in-lightning-design-system\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Grid In Lightning Design System\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/7d54984c6524404eb2ba261ace62da80\",\"name\":\"Aakanksha Singh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/eef6d7ed23fc4ad8f12c94d6d6d30ec2ebbb9bedbf9d8a9dc8626a3a171fa3fa?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/eef6d7ed23fc4ad8f12c94d6d6d30ec2ebbb9bedbf9d8a9dc8626a3a171fa3fa?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g\",\"caption\":\"Aakanksha Singh\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/aakanksha-singh391\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Grid In Lightning Design System Salesforce Lightning","description":"Grids in lightning design system, provides the user to alter the behavior of the elements by using helper classes which are pre-defined.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/grid-in-lightning-design-system\/","og_locale":"en_US","og_type":"article","og_title":"Grid In Lightning Design System Salesforce Lightning","og_description":"Grids in lightning design system, provides the user to alter the behavior of the elements by using helper classes which are pre-defined.","og_url":"https:\/\/webkul.com\/blog\/grid-in-lightning-design-system\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2016-08-25T07:08:29+00:00","article_modified_time":"2016-12-28T11:06:48+00:00","og_image":[{"width":825,"height":260,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/featureSalesforce-Lightning-2.png","type":"image\/png"}],"author":"Aakanksha Singh","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Aakanksha Singh","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/grid-in-lightning-design-system\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/grid-in-lightning-design-system\/"},"author":{"name":"Aakanksha Singh","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/7d54984c6524404eb2ba261ace62da80"},"headline":"Grid In Lightning Design System","datePublished":"2016-08-25T07:08:29+00:00","dateModified":"2016-12-28T11:06:48+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/grid-in-lightning-design-system\/"},"wordCount":243,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/grid-in-lightning-design-system\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/featureSalesforce-Lightning-2.png","keywords":["download the resource lightning design system","grid lightning design system"],"articleSection":["Lightning Design System","Salesforce"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/grid-in-lightning-design-system\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/grid-in-lightning-design-system\/","url":"https:\/\/webkul.com\/blog\/grid-in-lightning-design-system\/","name":"Grid In Lightning Design System Salesforce Lightning","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/grid-in-lightning-design-system\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/grid-in-lightning-design-system\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/featureSalesforce-Lightning-2.png","datePublished":"2016-08-25T07:08:29+00:00","dateModified":"2016-12-28T11:06:48+00:00","description":"Grids in lightning design system, provides the user to alter the behavior of the elements by using helper classes which are pre-defined.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/grid-in-lightning-design-system\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/grid-in-lightning-design-system\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/grid-in-lightning-design-system\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/featureSalesforce-Lightning-2.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/07\/featureSalesforce-Lightning-2.png","width":825,"height":260},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/grid-in-lightning-design-system\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Grid In Lightning Design System"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/7d54984c6524404eb2ba261ace62da80","name":"Aakanksha Singh","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/eef6d7ed23fc4ad8f12c94d6d6d30ec2ebbb9bedbf9d8a9dc8626a3a171fa3fa?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/eef6d7ed23fc4ad8f12c94d6d6d30ec2ebbb9bedbf9d8a9dc8626a3a171fa3fa?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g","caption":"Aakanksha Singh"},"url":"https:\/\/webkul.com\/blog\/author\/aakanksha-singh391\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/57697","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/104"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=57697"}],"version-history":[{"count":13,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/57697\/revisions"}],"predecessor-version":[{"id":69672,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/57697\/revisions\/69672"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media\/55839"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=57697"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=57697"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=57697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}