Skip to main contentSkip to site searchSkip to component search
Honeycomb

Grid

The grid component is a 12-column CSS grid layout with configurable gutters, alignment, and row gaps.

The grid component (flix-grid) is the layout container for arranging content in columns.

It is designed to be used together with grid cell (flix-grid__cell) items.

Default grid

By default, the grid uses:

  • gutter 2;
  • no row gap;
Cell
Cell
Cell
Cell
Cell
Cell 
<div class="flix-grid">
  <div class="flix-grid__cell flix-grid__cell--col-span-4" >
    <div class="flix-box flix-box--small">
      Cell
    </div>
  </div>
  <div class="flix-grid__cell flix-grid__cell--col-span-4" >
    <div class="flix-box flix-box--small">
      Cell
    </div>
  </div>
  <div class="flix-grid__cell flix-grid__cell--col-span-4" >
    <div class="flix-box flix-box--small">
      Cell
    </div>
  </div>
  <div class="flix-grid__cell flix-grid__cell--col-span-4" >
    <div class="flix-box flix-box--small">
      Cell
    </div>
  </div>
  <div class="flix-grid__cell flix-grid__cell--col-span-4" >
    <div class="flix-box flix-box--small">
      Cell
    </div>
  </div>
  <div class="flix-grid__cell flix-grid__cell--col-span-4" >
    <div class="flix-box flix-box--small">
      Cell
    </div>
  </div>
</div>

Modifiers

flix-grid--gutter-4
Increases the grid gutter space to `space-4` value.
flix-grid--align-start
flix-grid--align-center
flix-grid--align-end
Controls vertical alignment of the grid items (cross axis).
flix-grid--justify-start
flix-grid--justify-center
flix-grid--justify-end
Controls horizontal alignment of the grid items (main axis).
flix-grid--with-row-gap
Applies the gutter value as a row gap as well.

Gutter 4

The component currently supports gutter: 2 (default) and gutter: 4.

Gutter 4
Gutter 4 
<div class="flix-grid flix-grid--gutter-4">
	<div class="flix-grid__cell flix-grid__cell--col-span-6">
    <div class="flix-box">
      Gutter 4
    </div>
  </div>
	<div class="flix-grid__cell flix-grid__cell--col-span-6">
    <div class="flix-box">
      Gutter 4
    </div>
  </div>
</div>

Align variations

Use --align-{start|center|end} to position grid items along the cross axis: top/start, center, or bottom/end.

Align start 
<div class="flix-grid flix-grid--align-start" style="min-height: 180px; background-color: var(--flix-highlight-color); border: 1px dashed var(--flix-ui-primary-color);">
	<div class="flix-grid__cell flix-grid__cell--col-span-12">
    <div class="flix-box">
      Align start
    </div>
  </div>
</div>
Align center 
<div class="flix-grid flix-grid--align-center" style="min-height: 180px; background-color: var(--flix-highlight-color); border: 1px dashed var(--flix-ui-primary-color);">
	<div class="flix-grid__cell flix-grid__cell--col-span-12">
    <div class="flix-box">
      Align center
    </div>
  </div>
</div>
Align end 
<div class="flix-grid flix-grid--align-end" style="min-height: 180px; background-color: var(--flix-highlight-color); border: 1px dashed var(--flix-ui-primary-color);">
	<div class="flix-grid__cell flix-grid__cell--col-span-12">
    <div class="flix-box">
      Align end
    </div>
  </div>
</div>

Justify variations

Use --justify-{start|center|end} modifier to position grid items along the main axis: left/start, center, or right/end.

Justify start
Justify start 
<div class="flix-grid flix-grid--justify-start" style="background-color: var(--flix-highlight-color); border: 1px dashed var(--flix-ui-primary-color);">
	<div class="flix-grid__cell flix-grid__cell--col-span-6">
    <div class="flix-box">
      Justify start
    </div>
  </div>
  <div class="flix-grid__cell flix-grid__cell--col-span-6">
    <div class="flix-box">
      Justify start
    </div>
  </div>
</div>
Justify center
Justify center 
<div class="flix-grid flix-grid--justify-center" style="background-color: var(--flix-highlight-color); border: 1px dashed var(--flix-ui-primary-color);">
	<div class="flix-grid__cell flix-grid__cell--col-span-6">
    <div class="flix-box">
      Justify center
    </div>
  </div>
  <div class="flix-grid__cell flix-grid__cell--col-span-6">
    <div class="flix-box">
      Justify center
    </div>
  </div>
</div>
Justify end
Justify end 
<div class="flix-grid flix-grid--justify-end" style="background-color: var(--flix-highlight-color); border: 1px dashed var(--flix-ui-primary-color);">
	<div class="flix-grid__cell flix-grid__cell--col-span-6">
    <div class="flix-box">
      Justify end
    </div>
  </div>
  <div class="flix-grid__cell flix-grid__cell--col-span-6">
    <div class="flix-box">
      Justify end
    </div>
  </div>
</div>

With gap between rows

Use the --with-row-gap to add a gap between the rows.

Rows are formed when the number of columns spanned by the grid columns exceeds 12.

Column 1 / Row 1
Column 2 / Row 1
Column 1 / Row 2
Column 2 / Row 2 
<div class="flix-grid flix-grid--with-row-gap">
	<div class="flix-grid__cell flix-grid__cell--col-span-6">
    <div class="flix-box">
      Column 1 / Row 1
    </div>
  </div>
  <div class="flix-grid__cell flix-grid__cell--col-span-6">
    <div class="flix-box">
      Column 2 / Row 1
    </div>
  </div>
  <div class="flix-grid__cell flix-grid__cell--col-span-6">
    <div class="flix-box">
      Column 1 / Row 2
    </div>
  </div>
  <div class="flix-grid__cell flix-grid__cell--col-span-6">
    <div class="flix-box">
      Column 2 / Row 2
    </div>
  </div>
</div>

Related Components