Grid

OverviewCodeDemos
  1. Usage
  2. rhx-grid-item
  1. Usage
  2. rhx-grid-item

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 '@rhx/elements/rhx-grid/rhx-grid.js';
</script>
Copy to Clipboard Wrap lines

rhx-grid

A responsive grid based off the Design Program Office (DPO) standardized design specifications.

Slots 0
None
Attributes 2
Attribute DOM Property Description Type Default
columns columns 
string | undefined
 
unknown
query query 
'media' | 'container' | null | undefined
 
null
Methods 0
None
Events 0
None
CSS Shadow Parts 0
None
CSS Custom Properties 4
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
Design Tokens 2
Token Copy
--rh-space-2xl
--rh-space-lg

rhx-grid-item

Grid Item

Slots 0
None
Attributes 3
Attribute DOM Property Description Type Default
col-span colSpan 
string | undefined
 
unknown
col-start colStart 
string | undefined
 
unknown
row-span rowSpan 
string | undefined
 
unknown
Methods 0
None
Events 0
None
CSS Shadow Parts 0
None
CSS Custom Properties 0
None
Design Tokens 0
None

Other libraries

To learn more about our other libraries, visit the Red Hat Design System: Getting Started.
Edit this page on GitHub