Grid

The Grid component is used to quickly position and align ‘square’ components in a grid format. ‘Square’ here refers to any component that has x1, x2, y1 and y2 props. This includes the Section component, the Rectangle mark, and any custom component that you would want to create, given it has the props mentioned above.

<script>
  import { Graphic, Rectangle, Grid } from '@snlab/florence'

  const colors = ['red', 'blue', 'green', 'orange', 'yellow', 'purple']
  let columns = 2
</script>

<div>
  <label for="cols-slider">Columns:</label>
  <input type="range" min="1" max="3" bind:value={columns} name="cols-slider" />
</div>

<Graphic width={200} height={200}>

  <Grid numberOfCells={colors.length} {columns} let:cells>

    {#each colors as color, i}
      
      <Rectangle {...cells[i]} fill={color} />

    {/each}

  </Grid>

</Graphic>

Columns:

Properties

Positioning

Prop	Required	Types	Default	Unit(s)
x1	`false`	`any`	`undefined`	Local coordinate
x2	`false`	`any`	`undefined`	Local coordinate
y1	`false`	`any`	`undefined`	Local coordinate
y2	`false`	`any`	`undefined`	Local coordinate

The Grid positioning props behave the same way as the Section positioning props.

Grid settings

Prop	Required	Type(s)	Default	Unit(s)
numberOfCells	`true`	`number`	`undefined`	-
rows	`false`	`number`	`undefined`	Integer
columns	`false`	`number`	`undefined`	Integer
padding	`false`	`number	PaddingObject`	`0`

numberOfCells is the only required prop among the grid settings. If rows and columns are undefined, values will be chosen automatically based on the number of cells and the aspect ratio result from the positioning props. If only rows is defined, columns will be calculated automatically and vice versa. Finally, if both rows and columns are defined, the Grid component will throw an error if the numberOfCells exceeds the number of cells.

padding is used to create an outer padding for the entire grid, and works the same way as the padding prop of the Section component. Both can be specified as a Number or an Object, where padding={10} is equivalent to padding={{ left: 10, right: 10, top: 10, bottom: 10 }} and padding={{ left: 10 }} is equivalent to padding={{ left: 10, right: 0, top: 0, bottom: 0 }}.

For more information on padding, see the local coordinates documentation.

Slot Scope

Grid exposes a value called cells through its slot scope using the let:cells syntax. The cells Array holds a series of objects in which the key is the ‘area name’ element in areas array and the value is a position object that will be used to position the cells of the grid. This uses the native Svelte slot syntax. This cells object is used to position the Grid component’s children that form the cells of the Grid (i.e. Section components).

For example, with the following prop values:

<Grid 
  numberOfCells={2}
  let:cells
>

  <!-- In here we have access to the cells object -->

</Grid>

the cells array has the following format:

type Cells = Cell[]

interface Cell {
  x1: number;
  x2: number;
  y1: number;
  y2: number;
}