Grid & Layout

A CSS Grid system (.ziom-grid), a 12-column flex row system (.ziom-row / .ziom-col-*), and flexbox/spacing utilities. Use these for page scaffolding instead of ad-hoc CSS.

CSS Grid

Set the column count with .ziom-grid-cols-{1-12} and gap with .ziom-grid-gap-{n}.

1

2

3

HTML

<div class="ziom-grid ziom-grid-cols-3 ziom-grid-gap-4">
  <div class="ziom-card"><div class="ziom-card-body">1</div></div>
  <div class="ziom-card"><div class="ziom-card-body">2</div></div>
  <div class="ziom-card"><div class="ziom-card-body">3</div></div>
</div>

Column Span

Spans 2

1

HTML

<div class="ziom-grid ziom-grid-cols-4 ziom-grid-gap-4">
  <div class="ziom-card ziom-col-span-2"><div class="ziom-card-body">Spans 2</div></div>
  <div class="ziom-card"><div class="ziom-card-body">1</div></div>
  <div class="ziom-card"><div class="ziom-card-body">1</div></div>
</div>

Flex Row & Columns

Half

HTML

<div class="ziom-row">
  <div class="ziom-col-6"><div class="ziom-card"><div class="ziom-card-body">Half</div></div></div>
  <div class="ziom-col-6"><div class="ziom-card"><div class="ziom-card-body">Half</div></div></div>
</div>

Common Utilities

Class	Effect
`ziom-flex ziom-items-center ziom-justify-between`	Flex row, vertically centered, space-between
`ziom-gap-4`	16px gap between flex/grid children
`ziom-mt-4` / `ziom-mb-6`	Margin top 16px / bottom 24px
`ziom-p-4` / `ziom-px-4`	Padding all / horizontal
`ziom-w-full`	100% width
`ziom-hidden ziom-md-block`	Hidden on mobile, shown on medium+