Grid

Display elements in a grid layout.

Default

<template>
  <PGrid class="min-h-40" :rows="2" :columns="3" debug>
    <PGridItem v-for="i of 6" :key="i">{{ i }}</PGridItem>
  </PGrid>
</template>

<style>
.pxd-grid-item {
  display: flex;
  align-items: center;
  padding-inline: 24px;
}
</style>

Responsive Grid with responsive guide clipping cells

Grid component with responsive rows and columns props at all 3 breakpoints as well as guide clipping on specific cells.

1 + 2

5 + 6

<template>
  <PGrid class="min-h-40" :columns="{ sm: 1, md: 2, lg: 3 }" :rows="{ sm: 6, md: 3, lg: 2 }" debug>
    <PGridItem :column="{ sm: '1', md: '1/3' }" :row="{ sm: '1/3', md: 1 }">1 + 2</PGridItem>
    <PGridItem>3</PGridItem>
    <PGridItem>4</PGridItem>
    <PGridItem :column="{ sm: 1, md: '1/3', lg: '2/4' }" :row="{ sm: '5/7', md: 3, lg: 2 }"
      >5 + 6</PGridItem
    >
  </PGrid>
</template>

Grid with overlaying cells

Grid component with cells that overlay another in various states.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at felis

<template>
  <PGrid class="min-h-50" columns="12" rows="3" debug>
    <PGridItem column="1/3" row="1/3">
      1
    </PGridItem>

    <PGridItem column="2/4" row="2/4">
      2
    </PGridItem>

    <PGridItem column="3/10" row="2/4">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at felis
    </PGridItem>

    <PGridItem column="7/12" row="1/2">
      3
    </PGridItem>

    <PGridItem column="11/13" row="1/3">
      4
    </PGridItem>
  </PGrid>
</template>

Specific Grid with Guide Clipping

Grid component with guide clipping enabled on specific cells.

<template>
  <PGrid class="min-h-50" columns="3" rows="4" debug>
    <PGridItem column="1/2" row="1/3"> 1 </PGridItem>
    <PGridItem column="3/4" row="1/2"> 2 </PGridItem>
    <PGridItem column="2/3" row="2/4"> 3 </PGridItem>
    <PGridItem column="1/2" row="4/5"> 4 </PGridItem>
    <PGridItem column="3/4" row="3/5"> 5 </PGridItem>
  </PGrid>
</template>

Props

Name	Type	Default	Description
debug	`boolean`	-	Draw amber lines showing the row and column tracks
rows	`string \| Responsive \| number`	`0`	Number of rows, or a per-breakpoint map like `{ sm: 6, md: 3 }`
columns	`string \| Responsive \| number`	`1`	Number of columns, or a per-breakpoint map like `{ sm: 1, md: 2 }`

GridItem Props

Name	Type	Default	Description
row	`ResponsiveValue<string \| number>`	-	Row placement, e.g. `1` or `1/3` to span lines 1 to 3
column	`ResponsiveValue<string \| number>`	-	Column placement, e.g. `2` or `2/4` to span lines 2 to 4

Slots

Name	Description
default	Default slot

GridItem Slots

Name	Description
default	Default slot

PXD