Grid

CSS grid with a fixed column count or auto-fit minimum width.

Jump to API reference

Import

Vue
import { UiGrid } from '@ziyarago/ui/vue'

Three columns

Makkah

Haram

Madinah

Nabawi

Jeddah

Airport
Vue
<UiGrid :cols="3" :gap="12">
  <UiCard title="Makkah">
    Haram
  </UiCard>
  <UiCard title="Madinah">
    Nabawi
  </UiCard>
  <UiCard title="Jeddah">
    Airport
  </UiCard>
</UiGrid>

Auto-fit

Taif

Hills

Al-Ula

Heritage

Yanbu

Coast

Abha

Mountains
Vue
<UiGrid :min="140" :gap="12">
  <UiCard title="Taif">
    Hills
  </UiCard>
  <UiCard title="Al-Ula">
    Heritage
  </UiCard>
  <UiCard title="Yanbu">
    Coast
  </UiCard>
  <UiCard title="Abha">
    Mountains
  </UiCard>
</UiGrid>

API reference

CSS grid with a fixed column count or auto-fit columns of a minimum width.

Props

PropType and valuesDefaultDescription
colsnumber—Fixed number of equal columns. When set, min is ignored.
minnumber | string240Minimum column width for auto-fit layout (used when cols is not set).
gapnumber | string16Gap between cells. Numbers are pixels, strings any CSS length.
asstring'div'HTML tag to render.
styleRecord<string, string | number>—Inline styles merged over the component styles.

Slots

Vue: named slots. React: a prop with the same name; default is children.

defaultGrid items.