<h2>Baseline grid</h2>
<h3>4-pixel grid</h3>
<p>The 4-pixel grid is the Dell Design System standard. The recommended space between every element should be a multiple of 4 pixels, horizontally and vertically. Designing with a 4-pixel grid provides more flexibility and granularity for things like spacing text and <a href="/foundations/icons/">icons</a>.</p>
<details data-name='image-block' data-images='[{"alt":"By using multiples of 4 (8 and 12 pixels) in the baseline grid, a designer will have the flexibility to size margins and padding for a variety of elements, like typography and components.","caption":"By using multiples of 4 (8 and 12 pixels) in the baseline grid, a designer will have the flexibility to size margins and padding for a variety of elements, like typography and components.","url":"https://dds.dell.com/site/stage/a3/54/Grid_Baseline_4px_212007_V1_f6809c620b.png"}]' data-numberofcolumns='1'></details>

<h2>12-column grid</h2>
<p>Most breakpoints are designed using the 12-column grid, except for XS (extra small) breakpoint ranges of 320 to 479 pixels and S (small) breakpoints of 480 to 767 pixels, which use the 2 and 6-column grid below.</p>
<details data-name='image-block' data-images='[{"alt":"Standard 12-column grid with margins and placeholder content spaced across the columns and gutters of the grid.","caption":"Standard 12-column grid with margins and placeholder content spaced across the columns and gutters of the grid.","url":"https://dds.dell.com/site/stage/2f/eb/Grid_12_Column_212007_V1_790892c547.png"}]' data-numberofcolumns='1'></details>

<h2>2-column grid</h2>
<p>The number of columns displayed in a grid is determined by the viewport range. When designing for breakpoint ranges of 479 pixels and below (XS), the grid automatically adjusts to 2-columns.</p>
<details data-name='image-block' data-images='[{"alt":"An example of an XS, 2-column grid and how content might appear across the screen.  ","caption":"An example of an XS, 2-column grid and how content might appear across the screen.","url":"https://dds.dell.com/site/stage/77/1a/Grid_2_Column_212007_V1_c1aa716e7b.png"}]' data-numberofcolumns='1'></details>

<h2>6-column grid</h2>
<p>When designing for a breakpoint range of 480 to 767 pixels (S), the grid automatically adjusts to a 6-column grid.</p>
<details data-name='image-block' data-images='[{"alt":"A 6-column grid for S breakpoints, featuring an example of how content might be spaced across the screen. ","caption":"A 6-column grid for S breakpoints, featuring an example of how content might be spaced across the screen.","url":"https://dds.dell.com/site/stage/a0/7d/Grid_6_Column_212007_V1_669b3f2bf5.png"}]' data-numberofcolumns='1'></details>

<h2>Grid elements</h2>
<p>There are four elements that make up the grid:</p>
<ul>
<li>Columns for content placement</li>
<li>Gutters to separate columns and content</li>
<li>Margins that define the left and right edges of the screen</li>
<li>Rows that contain content vertically</li>
</ul>
<h2>Column width</h2>
<p>Column widths are percentage-based and defined by viewport size, allowing content to adapt to the screen size. Columns may vary in width at different points within each <a href="#breakpoints">breakpoint</a> range but are always equal to each other. Content should be contained within the columns, but effects like shadows and hovers can expand into the margins or gutters.</p>
<h2>Column layout span</h2>
<p>Mix and match column widths by spanning multiple columns for a wide variety of layout options.</p>
<details data-name='image-block' data-images='[{"alt":"An example of how a designer may vary columns of content or containers across a 12-column grid layout within a page. ","caption":"An example of how a designer may vary columns of content or containers across a 12-column grid layout within a page.\n\n1. Two columns, spaced equally across a layout.\n2. Three columns, spaced equally.\n3. Four columns, spaced equally.\n4. Six columns, spaced equally.\n5. Two columns of unequal width: one that spans three-fourths of the page, and the other spanning one fourth of the page.","url":"https://dds.dell.com/site/stage/15/59/Grid_Column_Layout_Span_212007_V1_766aec7d90.png"}]' data-numberofcolumns='1'></details>

<h2>Grid best practices</h2>
<p>Make sure the content spans all of the columns in the layout (whether it is 2, 6, or 12 columns), rather than using columns as margins or padding. Following this methodology will keep layouts uniform and prevent unreliable responsive behavior.</p>
<details data-name='image-block' data-images='[{"alt":"In this example, a designer has spaced content in the center of the page, relying on grid columns for margins, instead of the actual margins. This will disrupt the responsiveness of the content on screen. ","caption":"In this example, a designer has spaced content in the center of the page, relying on grid columns for margins, instead of the actual margins. This will disrupt the responsiveness of the content on screen.","url":"https://dds.dell.com/site/stage/d9/b4/Grid_Best_Practices_212007_V1_2e96ac7bd0.png"}]' data-numberofcolumns='1'></details>

<h2>Gutter size</h2>
<p>Gutter widths are fixed within each breakpoint range. This provides a consistent visual order and prevents content overlap. Do not extend content into the gutters to keep spacing consistent. If additional horizontal space is needed between elements, increase the padding, not the gutter-width, or choose the “comfortable density” grid.</p>
<details data-name='image-block' data-images='[{"alt":"A sample design, showing how the designer might use gutters in the 12-column grid to layout and create margins between columns of content.","caption":"A sample design, showing how the designer might use gutters in the 12-column grid to layout and create margins between columns of content.","url":"https://dds.dell.com/site/stage/2e/d5/Grid_Gutter_Size_212007_V1_b0c0689360.png"}]' data-numberofcolumns='1'></details>

<h2>Margins</h2>
<p>Margins provide the white space beyond the content area and contribute to the comfort of the page. Margins provide a visual frame and prevent content from spilling over the viewable regions. Each breakpoint and density level has specific margin widths and scale as the viewport shifts from one breakpoint to the next.</p>
<h2>Side rail grids</h2>
<p>Some experiences require different grids and margins for <a href="/components/side-navigation/">side navigation</a> or other fixed elements that live outside the main content area. Remember, fixed element widths must have a pixel width divisible by 4. Margin examples are featured below.</p>
<details data-name='image-block' data-images='[{"alt":" Side navigation in its collapsed and expanded state pushes the grid and margins to the right, so that all content is visible.","caption":" Side navigation in its collapsed and expanded state pushes the grid and margins to the right, so that all content is visible.","url":"https://dds.dell.com/site/stage/92/65/Grid_Alt_Margin_Width_212007_V1_38b66975db.png"}]' data-numberofcolumns='1'></details>

<h2>Density</h2>
<p>Density describes the overall proximity of page elements to each other. Margins and gutters expand or contract based on density level. Likewise, as windows increase and decrease in size, content density is also impacted. For example, more white space or legibility is needed but there are space constraints, choose the “comfortable” grid. Use any of the three density levels, but for consistency it is recommended to use the same density grid across the entire experience.</p>
<ul>
<li>Compact accommodates heavier content, like lists and tables, by allowing more information to fit on a single screen.</li>
<li>Default is optimal for most experiences.</li>
<li>Comfortable provides more white space. This is ideal for <a href="/components/dropdown/">dropdown</a> menus, pickers, alerts, and <a href="/components/modal/">dialogs</a>.</li>
</ul>
<details data-name='image-block' data-images='[{"alt":"Grid density options: The compact grid has smaller margins and narrower gutters than the default grid. The comfortable grid has the widest gutters and margins. ","caption":"Grid density options: The compact grid has smaller margins and narrower gutters than the default grid. The comfortable grid has the widest gutters and margins.","url":"https://dds.dell.com/site/stage/77/56/Grid_Density_212007_V1_ae5f1e2c96.png"}]' data-numberofcolumns='1'></details>

<h2>Vertical spacing</h2>
<p>There are a few primary units in the vertical spacing guidelines:</p>
<ul>
<li>Element height</li>
<li>Space between elements</li>
<li>Text line height</li>
</ul>
<p>All of these values should be multiples of 4 pixels. Vertical spacing between all other elements, such as text objects and <a href="/patterns/form/">form</a> inputs, should also be in multiples of 4 pixels.</p>
<details data-name='image-block' data-images='[{"alt":"An example of how using a multiple of 4 pixels (12 pixels) can be used for vertical margins between typography and buttons. ","caption":"An example of how using a multiple of 4 pixels (12 pixels) can be used for vertical margins between typography and buttons.","url":"https://dds.dell.com/site/stage/59/c7/Grid_Vertical_Spacing_212007_V1_fb977aaab5.png"}]' data-numberofcolumns='1'></details>

<h2>Breakpoints</h2>
<p>In responsive design, a breakpoint is the mark at which a website’s content and design will change to provide the optimal user experience within a given viewport range.</p>
<p>The responsive grid adjusts margin, body widths, and the number of columns when scaling a layout for different viewport ranges. The breakpoints have been designed “up” for larger viewport ranges, rather than “down” to accommodate the smallest viewports.<br></br></p>
<p><strong>Viewport range</strong>: 320 to 479 pixels, <strong>T-shirt size</strong>: XS, <strong>Grid</strong>: 2-columns</p>
<table>
<thead>
<tr>
<th>Density</th>
<th>Gutters</th>
<th>Margins</th>
</tr>
</thead>
<tbody><tr>
<td>Compact</td>
<td>8px</td>
<td>16px</td>
</tr>
<tr>
<td>Default</td>
<td>16px</td>
<td>16px</td>
</tr>
<tr>
<td>Comfy</td>
<td>24px</td>
<td>24px</td>
</tr>
</tbody></table>
<p><strong>Viewport range</strong>: 480 to 767 pixels, <strong>T-shirt size</strong>: S, <strong>Grid</strong>: 6-columns</p>
<table>
<thead>
<tr>
<th>Density</th>
<th>Gutters</th>
<th>Margins</th>
</tr>
</thead>
<tbody><tr>
<td>Compact</td>
<td>8px</td>
<td>16px</td>
</tr>
<tr>
<td>Default</td>
<td>16px</td>
<td>16px</td>
</tr>
<tr>
<td>Comfy</td>
<td>24px</td>
<td>24px</td>
</tr>
</tbody></table>
<p><strong>Viewport range</strong>: 768 to 1023 pixels, <strong>T-shirt size</strong>: M, <strong>Grid</strong>: 6-columns</p>
<table>
<thead>
<tr>
<th>Density</th>
<th>Gutters</th>
<th>Margins</th>
</tr>
</thead>
<tbody><tr>
<td>Compact</td>
<td>16px</td>
<td>24px</td>
</tr>
<tr>
<td>Default</td>
<td>16px</td>
<td>32px</td>
</tr>
<tr>
<td>Comfy</td>
<td>24px</td>
<td>40px</td>
</tr>
</tbody></table>
<p><strong>Viewport range</strong>: 1024 to 1365 pixels, <strong>T-shirt size</strong>: L, <strong>Grid</strong>: 12-columns</p>
<table>
<thead>
<tr>
<th>Density</th>
<th>Gutters</th>
<th>Margins</th>
</tr>
</thead>
<tbody><tr>
<td>Compact</td>
<td>16px</td>
<td>32px</td>
</tr>
<tr>
<td>Default</td>
<td>16px</td>
<td>40px</td>
</tr>
<tr>
<td>Comfy</td>
<td>24px</td>
<td>48px</td>
</tr>
</tbody></table>
<p><strong>Viewport range</strong>: 1366 to 1583 pixels, <strong>T-shirt size</strong>: XL, <strong>Grid</strong>: 12-columns</p>
<table>
<thead>
<tr>
<th>Density</th>
<th>Gutters</th>
<th>Margins</th>
</tr>
</thead>
<tbody><tr>
<td>Compact</td>
<td>16px</td>
<td>32px</td>
</tr>
<tr>
<td>Default</td>
<td>16px</td>
<td>48px</td>
</tr>
<tr>
<td>Comfy</td>
<td>24px</td>
<td>56px</td>
</tr>
</tbody></table>
<p><strong>Viewport range</strong>: 1584 to 1919 pixels, <strong>T-shirt size</strong>: 2XL, <strong>Grid</strong>: 12-columns</p>
<table>
<thead>
<tr>
<th>Density</th>
<th>Gutters</th>
<th>Margins</th>
</tr>
</thead>
<tbody><tr>
<td>Compact</td>
<td>16px</td>
<td>48px</td>
</tr>
<tr>
<td>Default</td>
<td>24px</td>
<td>64px</td>
</tr>
<tr>
<td>Comfy</td>
<td>32px</td>
<td>80px</td>
</tr>
</tbody></table>
<p><strong>Viewport range</strong>: 1920 to 2559 pixels, <strong>T-shirt size</strong>: 3XL, <strong>Grid</strong>: 12-columns</p>
<table>
<thead>
<tr>
<th>Density</th>
<th>Gutters</th>
<th>Margins</th>
</tr>
</thead>
<tbody><tr>
<td>Compact</td>
<td>24px</td>
<td>48px</td>
</tr>
<tr>
<td>Default</td>
<td>32px</td>
<td>72px</td>
</tr>
<tr>
<td>Comfy</td>
<td>46px</td>
<td>96px</td>
</tr>
</tbody></table>
<p><strong>Viewport range</strong>: 2560 to 3839 pixels, <strong>T-shirt size</strong>: 4XL, <strong>Grid</strong>: 12-columns</p>
<table>
<thead>
<tr>
<th>Density</th>
<th>Gutters</th>
<th>Margins</th>
</tr>
</thead>
<tbody><tr>
<td>Compact</td>
<td>32px</td>
<td>64px</td>
</tr>
<tr>
<td>Default</td>
<td>40px</td>
<td>96px</td>
</tr>
<tr>
<td>Comfy</td>
<td>56px</td>
<td>128px</td>
</tr>
</tbody></table>
<p><strong>Viewport range</strong>: 3840+ pixels, <strong>T-shirt size</strong>: 5XL, <strong>Grid</strong>: 12-columns</p>
<table>
<thead>
<tr>
<th>Density</th>
<th>Gutters</th>
<th>Margins</th>
</tr>
</thead>
<tbody><tr>
<td>Compact</td>
<td>40px</td>
<td>96px</td>
</tr>
<tr>
<td>Default</td>
<td>48px</td>
<td>128px</td>
</tr>
<tr>
<td>Comfy</td>
<td>64px</td>
<td>160px</td>
</tr>
</tbody></table>
<h2>Storybook demos</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit Storybook","path":"https://vanilla.delldesignsystem.com/?path=/story/foundations-grid--page","type":"External"},"title":"Vanilla grid demo","description":"View the grid demo and code in Vanilla.","icon":"metadata"},{"image":{"url":"","alt":""},"link":{"label":"Visit Storybook","path":"https://angular.delldesignsystem.com/?path=/story/foundations-grid--page","type":"External"},"title":"Angular grid demo","description":"View the grid demo and code in Angular.","icon":"angular"},{"image":{"url":"","alt":""},"link":{"label":"Visit Storybook","path":"https://react.delldesignsystem.com/index.html?path=/docs/foundations-grid--docs","type":"External"},"title":"React grid demo","description":"View the grid demo and code in React.","icon":"react"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1'></details>

<h2>Articles</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/using-grids-in-interface-designs/","type":"External"},"title":"Using Grids in Interface Designs","description":"Read the Nielsen Norman Group&#39;s article on grids.","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

The grid is the structural foundation of all visual elements, from typography to columns, boxes, icons, and illustrations. It provides guidance for all creative decision-making, supporting content, and creating a consistent, repeatable, and responsive framework for design.

 Grid

<p>AI Chat Toolkit has moved! You can now find it under the AI section.</p>


AI Chat Toolkit Redirect

<p>The DDS Feedback Form has been updated to point to Service Now (the new official intake form). Please <a href="/resources/videos/servicenow-overview">review this video</a> to learn more about how to interact with our team. Although the tool and process changed, our team expects to continue providing the same support as before.</p>
