Grid
Lightdom CSS
This element requires you to load "Lightdom CSS" stylesheets for styling deeply slotted elements.
Note
Replace /path/to/ with path to the CSS file, whether local or CDN.
<link rel="stylesheet" href="/path/to/rhx-grid/rhx-grid-lightdom.css">Usage
<rhx-grid columns="2xs:1 xs:2 sm:4 lg:6 xl:12">
<div>Grid Item 1</div>
<div>Grid Item 2</div>
<div>Grid Item 3</div>
<div>Grid Item 4</div>
<div>Grid Item 5</div>
<div>Grid Item 6</div>
<div>Grid Item 7</div>
<div>Grid Item 8</div>
<div>Grid Item 9</div>
<div>Grid Item 10</div>
<div>Grid Item 11</div>
<div>Grid Item 12</div>
</rhx-grid>
<link rel="stylesheet" href="../rhx-grid-lightdom.css">
<script type="module">
import '@rhdx/elements/rhx-grid/rhx-grid.js';
</script>rhx-grid
A responsive grid based off the Design Program Office (DPO) standardized design specifications.
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
columns |
columns |
|
|
|
query |
query |
|
|
| CSS Property | Description | Default |
|---|---|---|
--rhx-grid-columns |
number of columns |
12
|
--rhx-grid-rows |
number of rows |
1
|
--rhx-grid-column-gap |
value in px of spacing between columns |
16
|
--rhx-grid-row-gap |
value in px of spacing between rows |
16
|
rhx-grid-item
Grid Item
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
col-span |
colSpan |
|
|
|
col-start |
colStart |
|
|
|
row-span |
rowSpan |
|
|
Other libraries
To learn more about our other libraries, visit the Red Hat Design System: Getting Started.
