Grid v0.1.0+ HelixUI v0.1.0 or later required

The Grid component provides CSS utility classes based on CSS Flexible Box Layout to help with arranging content within containers.

Rows

Rows are containers that allow you to divide their width amongst their children.

It was discovered that by rarely reviewing the VOC meetings, we can practice the ranked XP task for the agile branch. If it takes you too long to join the viable XP manifesto, then you are not burning out enough.

Column 1 of 3

Column 2 of 3

Column 3 of 3

Try to commit the burndown standard, maybe it will help join the MVP standards. As a user, I should be able to block the burndown deadline so that I can block the minimum WIP methods near the parallel deadlines.

<p>...</p>
<div class="hxRow">
  <div class="hxCol"><p>Column 1 of 3</p></div>
  <div class="hxCol"><p>Column 2 of 3</p></div>
  <div class="hxCol"><p>Column 3 of 3</p></div>
</div>
<p>...</p>

Columns

Columns are containers that allow you to divide their height amongst their children.

Columns are the basis for all positioned content within a row.
Columns share width equally among other columns in the same row.

1/1

1/2

2/2

1/3

2/3

3/3

<div class="hxRow">
  <div class="hxCol">1/1</div>
</div>
<div class="hxRow">
  <div class="hxCol">1/2</div>
  <div class="hxCol">2/2</div>
</div>
<div class="hxRow">
  <div class="hxCol">1/3</div>
  <div class="hxCol">2/3</div>
  <div class="hxCol">3/3</div>
</div>

Column Width

Column width modifiers will set the width of a column container to a predefined percentage of the row width.

Use the .hxSpan-{N} modifier (1 ≤ N ≤ 12) to create columns that are a fraction of a 12-column row width.

.hxSpan-{N}-{size} responsive classes are available.
.hxSpan-{N} is shorthand for .hxSpan-{N}-xs

<div class="hxRow">
  <div class="hxCol hxSpan-12">12</div>
</div>
<div class="hxRow">
  <div class="hxCol hxSpan-1">1</div>
  <div class="hxCol hxSpan-11">11</div>
</div>
<div class="hxRow">
  <div class="hxCol hxSpan-2">2</div>
  <div class="hxCol hxSpan-10">10</div>
</div>
<div class="hxRow">
  <div class="hxCol hxSpan-3">3</div>
  <div class="hxCol hxSpan-9">9</div>
</div>
<div class="hxRow">
  <div class="hxCol hxSpan-4">4</div>
  <div class="hxCol hxSpan-8">8</div>
</div>
<div class="hxRow">
  <div class="hxCol hxSpan-5">5</div>
  <div class="hxCol hxSpan-7">7</div>
</div>
<div class="hxRow">
  <div class="hxCol hxSpan-6">6</div>
  <div class="hxCol hxSpan-6">6</div>
</div>

Column Offset

You can use the .hxOffset-{N} class (1 ≤ N ≤ 11) to offset your column from the start of the row.

.hxOffset-{N}-{size} responsive classes are available
.hxOffset-{N} is shorthand for .hxOffset-{N}-xs

<div class="hxRow">
  <div class="hxCol hxSpan-2">2</div>
  <div class="hxCol hxSpan-6 hxOffset-1">6</div>
  <div class="hxCol hxSpan-2 hxOffset-1">2</div>
</div>
<div class="hxRow">
  <div class="hxCol hxSpan-2 hxOffset-2">2</div>
  <div class="hxCol hxSpan-4">4</div>
  <div class="hxCol hxSpan-2">2</div>
</div>
<div class="hxRow">
  <div class="hxCol hxSpan-4">4</div>
  <div class="hxCol hxSpan-4 hxOffset-4">4</div>
</div>

Column Ordering

Reordering columns does not change tab order.
Tab order is based on the DOM order, not visual appearance.

Use the .hxOrder-{N} class (1 ≤ N ≤ 12) to reorder your columns.

.hxOrder-{N}-{size} responsive classes are available
.hxOrder-{N} is shorthand for .hxOrder-{N}-xs

The columns below are coded in HTML in the order of 2-4-1-3.
The .hxOrder-* classes reordered them in the proper numerical order.

<div class="hxRow">
  <div class="hxCol hxOrder-2">#2</div>
  <div class="hxCol hxOrder-4">#4</div>
  <div class="hxCol hxOrder-1">#1</div>
  <div class="hxCol hxOrder-3">#3</div>
</div>

Responsive Options

All column modifiers support adding an optional breakpoint.

Omitting the breakpoint will default to xs (applies to all breakpoints).
Each respoinsive class corresponds to the minimum breakpoint required to achieve the desired appearance.
Larger breakpoints override smaller ones.

CSS Class	Minimum Breakpoint	Overrides	Overridden By
`.hxModifier-{N}[-xs]`	`0em (0px)`	N/A	all below
`.hxModifier-{N}-sm`	`40em (~640px)`	all above	all below
`.hxModifier-{N}-md`	`64em (~1024px)`	all above	all below
`.hxModifier-{N}-lg`	`75em (~1200px)`	all above	all below
`.hxModifier-{N}-xl`	`90em (~1440px)`	all above	N/A

<div class="hxRow">
  <div class="demoCol hxCol hxSpan-12-xs hxSpan-4-sm hxSpan-3-md hxSpan-2-lg hxSpan-1-xl"></div>
  <div class="demoCol hxCol hxSpan-6-xs hxSpan-4-sm hxSpan-6-md hxSpan-8-lg hxSpan-10-xl"></div>
  <div class="demoCol hxCol hxSpan-6-xs hxSpan-4-sm hxSpan-3-md hxSpan-2-lg hxSpan-1-xl"></div>
</div>
<div class="hxRow">
  <div class="demoCol hxCol hxSpan-12-xs hxSpan-4-sm hxSpan-3-md hxSpan-2-lg hxSpan-1-xl"></div>
  <div class="demoCol hxCol hxSpan-12-xs hxSpan-8-sm hxSpan-9-md hxSpan-10-lg hxSpan-11-xl"></div>
</div>
<div class="hxRow">
  <div class="demoCol hxCol hxSpan-12-xs hxSpan-8-sm hxSpan-6-md hxSpan-4-lg hxSpan-3-xl"></div>
  <div class="demoCol hxCol hxSpan-12-xs hxSpan-4-sm hxSpan-6-md hxSpan-8-lg hxSpan-9-xl"></div>
</div>

Column Wrapping

Columns wrap if a row's total column count exceeds 12.

The following example should arrange the content into:

3 columns on small screens
4 columns on medium screens
6 columns on all other sizes

Snow White

The Evil Queen

The Prince

Happy

Sleepy

Sneezy

Grumpy

Bashful

Dopey

Doc

<div class="hxRow">
  <div class="hxCol hxSpan-4-xs hxSpan-3-md hxSpan-2-lg">Snow White</div>
  <div class="hxCol hxSpan-4-xs hxSpan-3-md hxSpan-2-lg">The Evil Queen</div>
  <div class="hxCol hxSpan-4-xs hxSpan-3-md hxSpan-2-lg">The Prince</div>
  <div class="hxCol hxSpan-4-xs hxSpan-3-md hxSpan-2-lg">Happy</div>
  <div class="hxCol hxSpan-4-xs hxSpan-3-md hxSpan-2-lg">Sleepy</div>
  <div class="hxCol hxSpan-4-xs hxSpan-3-md hxSpan-2-lg">Sneezy</div>
  <div class="hxCol hxSpan-4-xs hxSpan-3-md hxSpan-2-lg">Grumpy</div>
  <div class="hxCol hxSpan-4-xs hxSpan-3-md hxSpan-2-lg">Bashful</div>
  <div class="hxCol hxSpan-4-xs hxSpan-3-md hxSpan-2-lg">Dopey</div>
  <div class="hxCol hxSpan-4-xs hxSpan-3-md hxSpan-2-lg">Doc</div>
</div>

Nesting Containers

Do not apply row and column container classes to the same element.

Rows and columns can be nested as deep as needed.

<div class="hxRow">
  <div class="hxCol hxSpan-12">12
    <div class="hxRow">
      <div class="hxCol hxSpan-6">6
        <div class="hxRow">
          <div class="hxCol hxSpan-4">4</div>
          <div class="hxCol hxSpan-4">4</div>
          <div class="hxCol hxSpan-4">4</div>
        </div>
      </div>
      <div class="hxCol hxSpan-6">6
        <div class="hxRow">
          <div class="hxCol hxSpan-3">3</div>
          <div class="hxCol hxSpan-9">9</div>
        </div>
      </div>
    </div>
  </div>
</div>

Styling Containers

Do not attempt to style rows or columns directly.

There are limitations to styling rows and columns.

Rows have margins set to align the outer columns with surrounding content.
Columns in a row have padding applied to them to simulate gutters.
Wrap your content in a <div> to apply custom CSS.

As a user, I should be able to measure the flexible project management so that I can decide the alpha VOC relationships outside the big interactions. If we adjust upon the relationships, we can get the pair meeting outside the WIP commitment.

This is a custom styled container! Notice how it fills the green areas of the column.

<div class="hxRow">
  <div class="hxCol hxSpan-4">
    <p>...</p>
  </div>
  <div class="hxCol hxSpan-4">
    <div class="example-styled-container">
      <p>
        This is a custom styled container! Notice how it fills the
        green areas of the column.
      </p>
    </div>
  </div>
  <div class="hxCol hxSpan-4">
    <p>...</p>
  </div>
</div>

Going Gutterless

Add the .hxGutterless CSS class to your row container to remove gutters from its immediate children.

Notice how the nested row in the second column still applies its gutters.

1/3

1/2

1/3

<div class="hxRow hxGutterless">
  <div class="hxCol">1/3</div>
  <div class="hxCol">1/3
    <div class="hxRow">
      <div class="hxCol">1/2</div>
      <div class="hxCol">1/2</div>
    </div>
  </div>
  <div class="hxCol">1/3</div>
</div>

Compatibility

HelixUI Grid is not compatible with Bootstrap grid styles.

See Also