@salesforce-ux/c360-grid
Advanced tools
The C360 grid system provides a flexible, mobile-first, device-agnostic layout system. It has features to control alignment, flow, and gaps.
@salesforce-ux/c360-gridThe C360 grid system provides a flexible, mobile-first, device-agnostic layout system. It has features to control alignment, flow, and gaps.
Let's start by installing c360-grid as a dependency of your project with npm.
npm i @salesforce-ux/c360-grid
After installation, all the distributables for the C360 Grid are found under @salesforce-ux/c360-grid/dist/ folder.
| File Name | Description |
|---|---|
index.css | The Compiled CSS file for c360-grid package |
c360-grid IntegrationThere are different ways to include c360-grid to a web application depending on the requirement.It can be used in both light DOM and shadow DOM Below are the styles to include the package -
You can use the HTML <link> to link to C360 Grid as an external resource.
<html>
<head>
<!-- Dependencies go here -->
<link rel="stylesheet" href="...">
<link rel="stylesheet" href="/node_modules/@salesforce-ux/c360-grid/dist/index.css">
<!-- Your application's stylesheets go below -->
<link rel="stylesheet" href="...">
</head>
<body>
<!-- Your application -->
</body>
</html>
You can use CSS @imports to pull in C360 Grid.
@import "@salesforce-ux/c360-grid/dist/index.css";
You can use JS import to pull in C360 Grid directly in the JS file.
import "@salesforce-ux/c360-grid/dist/index.css";
Below are a few examples of grid layout which is part of c360-grid.
<div grid axis="row">...</div>
<div grid>
<div>Grid item</div>
<div>Grid item</div>
</div>
To see more examples with interactive demo, please visit c360 Subsytem's Storybook Environment
The C360 grid features a mobile-first, responsive layout system; built on flexbox.
To initialize a grid container, set the grid attribute to your element.
<div grid>...</div>
By default, a grid flows left-to-right on a horizontal or x-axis. This behavior can be changed to flow right-to-left, top-to-bottom, and bottom-to-top.
Left to right
<div grid axis="row">...</div>
Right to left
<div grid axis="row-reverse">...</div>
Top to bottom
<div grid axis="vertical">...</div>
Bottom to top
<div grid axis="vertical-reverse">...</div>
A grid container will have 1 or more grid items to make up your layout. The direct descendants of a grid container are considered grid items. By being a grid item, you can modify its attributes independently or by the container.
<div grid>
<div>Grid item</div>
<div>Grid item</div>
</div>
A grid container is required to change the attributes of a grid item.
A benefit of using flexbox for your layout is things will automatically adjust inflow based on its flex properties and the size of its children's content.
There are times (most the time) when you want to explicitly define a width on a grid item. You can accomplish this by adding a size attribute and a value to determines its width.
<div grid>
<div size="1:2">item</div>
<!-- 50% -->
<div size="1:2">item</div>
<!-- 50% -->
</div>
The size attribute accepts a range of human-friendly values, you may choose to use 6:12 or 1:2, both outcomes are 50%. The second value should be based off the number of grid columns you have set for your parent container.
Available Widths
| Size | Value |
|---|---|
auto | auto |
1:1 | 100% |
1:2 | 50% |
1:3 | 33.333% |
2:3 | 66.667% |
1:4 | 25% |
2:4 | 50% |
3:4 | 75% |
1:5 | 20% |
2:5 | 40% |
3:5 | 60% |
4:5 | 80% |
1:6 | 16.667% |
2:6 | 33.333% |
3:6 | 50% |
4:6 | 66.667% |
5:6 | 83.333% |
1:7 | 14.28% |
2:7 | 28.57% |
3:7 | 42.85% |
4:7 | 57.14% |
5:7 | 71.42% |
6:7 | 85.71% |
1:8 | 12.5% |
2:8 | 25% |
3:8 | 37.5% |
4:8 | 50% |
5:8 | 62.5% |
6:8 | 75% |
7:8 | 87.5% |
1:12 | 8.333% |
2:12 | 16.667% |
3:12 | 25% |
4:12 | 33.333% |
5:12 | 41.667% |
6:12 | 50% |
7:12 | 58.333% |
8:12 | 66.667% |
9:12 | 75% |
10:12 | 83.333% |
11:12 | 91.667% |
Implementation Note
Be sure to stick within the available widths based on the grid columns you choose to use. For example, if you have established a 12 column grid, the grid items that are direct descendants should refer to the
sizeassociated to12.
Good
<!-- 12 column grid -->
<div grid>
<div size="8:12"></div>
<div size="4:12"></div>
</div>
Bad
<!-- unknown column grid -->
<div grid>
<div size="2:3"></div>
<div size="4:12"></div>
</div>
Additionally, you can easily modify the width of an item at a defined breakpoint depending on the width of the viewport.
This can be done by appending @ then the breakpoint definition of x-small, small, medium, large, or x-large. For example, 1:2@medium would cause the grid item to take up 50% of its available width when the browsers viewport is larger than 768px.
Breakpoints
| T-shirt size name | Breakpoint width |
|---|---|
x-small | 320px |
small | 480px |
medium | 768px |
large | 1024px |
x-large | 1280px |
To add space between your grid items, you can add a gap attribute to your grid container. The gap attribute takes a t-shirt size name:
Implementation Note
For a child grid item to pick up the gap size set on the parent, the element is required to have a
sizeattribute set. If you don't need an explicit width, i.e., 50%, you can addsize="auto".
Gap Sizes
| T-shirt size name | Value |
|---|---|
xxx-small | 2px |
xx-small | 4px |
x-small | 8px |
small | 12px |
medium | 16px |
large | 24px |
x-large | 32px |
xx-large | 48px |
When setting widths to your grid items, once a row of items exceed a total width of 100% you can force them to wrap to multiple rows by adding flow="wrap" to your grid container.
By default, the grid items will not wrap.
<div grid flow="wrap">
<!-- Row 1 - 66.667% | 33.333% -->
<div size="8:12"></div>
<div size="4:12"></div>
<!-- Row 2 - 50% | 50% -->
<div size="6:12"></div>
<div size="6:12"></div>
</div>
Since the grids are built on flexbox, they allow us to do some interesting things with alignment on both a horizontal axis and vertical axis. You can add an alignment value to the grid attribute.
Start of axis
<div grid="align-start">...</div>
|-----------------|
|[ ][ ][ ] |
|-----------------|
Center of axis
<div grid="align-center">...</div>
|-----------------|
| [ ][ ][ ] |
|-----------------|
End of axis
<div grid="align-end">...</div>
|-----------------|
| [ ][ ][ ]|
|-----------------|
Evenly spaced along axis
<div grid="align-spread">...</div>
|-----------------|
|[ ] [ ] [ ]|
|-----------------|
Equally spaced along axis
<div grid="align-space">...</div>
|-----------------|
| [ ] [ ] [ ] |
|-----------------|
Implementation Note
To vertically align elements on a cross-axis of a grid container, the elements need available vertical white space. This is usually achieved by having a height applied to the grid container.
Start of vertical axis
<div grid="align-space" axis="vertical">...</div>
|-----------------|
| [ ] [ ] [ ] |
| |
| |
|-----------------|
Center of vertical axis
<div grid="align-center" axis="vertical">...</div>
|-----------------|
| |
| [ ] [ ] [ ] |
| |
|-----------------|
End of vertical axis
<div grid="align-end" axis="vertical">...</div>
|-----------------|
| |
| |
| [ ] [ ] [ ] |
|-----------------|
Implementation Note
To vertically align elements on a cross-axis of a grid container, the elements need available vertical white space. This is usually achieved by having a height applied to the grid container.
To specify the vertical placement of grid items on the cross axis, add the value of align-start, align-center, and align-end to the grid-item attribute.
<div grid>
<div grid-item="align-start"></div>
<div grid-item="align-center"></div>
<div grid-item="align-end"></div>
</div>
|-----------------|
|[ ] |
| [ ] |
| [ ]|
|-----------------|
FAQs
The C360 grid system provides a flexible, mobile-first, device-agnostic layout system. It has features to control alignment, flow, and gaps.
We found that @salesforce-ux/c360-grid demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.