Grid

Quickly build responsive grids in Kriyā in just two steps:

  1. Add a grid container.
  2. Add as many cell elements as you want.
I'm a cell
I'm a cell
I'm a cell
<div class="grid">
	<div class="cell">...</div>
	<div class="cell">...</div>
	<div class="cell">...</div>
</div>

Size

Cells have equal width by default but you can change the size of individual cells with the following modifiers:

  • is-three-quarters
  • is-two-thirds
  • is-half
  • is-one-third
  • is-one-quarter

Remaining cells grow or shrink to fill up the remaining space.

is-half
Auto
Auto
<div class="grid">
	<div class="cell is-half">...</div>
	<div class="cell">...</div>
	<div class="cell">...</div>
</div>

Grids can also be divided into 12 columns, so you can use size modifiers on your cell like is-6, which is 6 columns (or cells) out of 12:

  • is-2
  • is-3
  • is-4
  • is-5
  • is-6
  • is-7
  • is-8
  • is-9
  • is-10
  • is-11
is-3
Auto
Auto
<div class="grid">
	<div class="cell is-3">...</div>
	<div class="cell">...</div>
	<div class="cell">...</div>
</div>

Precise

If you want a cell to only take up as much room as it needs, add the is-precise modifier to the cell. Any neighbouring cells will fill up the remaining space.

I'm only 200 px wide
Auto
<div class="grid">
	<div class="cell is-precise">...</div>
	<div class="cell">...</div>
</div>

Offsetting

You can use empty cells to create space around cell elements, but you can also use an offset modifier like is-offset-one-quarter instead.

is-4 is-offset-8
<div class="grid">
	<div class="cell is-4 is-offset-8">...</div>
</div>

Responsive

Kriyā grids use Flexbox, and cells are only flexed from the medium-up media query. So on smaller viewports like smartphones, cells are stacked on top of each other. You can override this though by adding the is-mobile modifier to the grid container. Now your cell widths will be respected on all viewports.

I'm a cell
I'm a cell
I'm a cell

Similarly, if you only want cells to flex on desktop, just add the is-desktop modifier to the grid container. You can even define cell sizes depending on viewport with modifiers like is-one-third-tablet or is-half-mobile.

Nesting

You can nest grids to give you even more flexibility in your design.

Multiline

You can start a new line by closing a grid container. But you can also add the is-multiline modifier and keep on adding more cell elements. Now your grid will automatically wrap.

is-one-third
is-one-third
is-one-third
is-one-third
is-two-thirds
<div class="grid is-multiline">
	<div class="cell is-one-third">...</div>
	<div class="cell is-one-third">...</div>
	<div class="cell is-one-third">...</div>
	<div class="cell is-one-third">...</div>
	<div class="cell is-two-thirds">...</div>
</div>

Gapless

Remove the space between cells by adding the is-gapless modifier to the grid container. Go nuts and combine it with the is-multiline modifier if you like.

I'm a gapless cell
I'm a gapless cell
I'm a gapless cell
is-two-thirds
I'm a gapless cell

Kriyā grids are pretty extensible so play around with combining modifiers, nesting grids and so on... to get the exact layout you want.

Below is a list of some grid modifiers, but you'll need to dig into grid.scss to see everything.