Examples Properties Simplest usage Basic usage Specifing a Maximum Column Width Custom Horizontal and Vertical Gap Spacing Custom Column Width Weightings Readme

Wrappable Fluid Grid

Properties

style

Record<string, any> | undefined

className

string | undefined

itemClassName

string | undefined

data

DataItem[]

required

gap

number | { x: number; y: number; } | undefined

minColWidth

number | undefined

maxColWidth

number | undefined

minMaxWeight

number | undefined

Simplest usage

import Grid from 'react-wrappable-fluid-grid';

<Grid data={[1, 2, 3]}>{n => n}</Grid>

<Grid data={[1, 2, 3]}>{n => n}</Grid>

Basic usage

Start By:

Input data array
Define gap spacing in px
Define minimum column width

Resize the screen to try it out

<Grid
  data={[
    { value: 1 },
    { value: 2 },
    { value: 3 },
    { value: 4 },
    { value: 5 },
    { value: 6 },
  ]}
  gap={10}
  minColWidth={100}
>
  {({ value }) => {
    return (
      <div style={{ background: '#efefef', textAlign: 'center' }}>
        {value}
      </div>
    )
  }}
</Grid>

<Grid
  data={[
    { value: 1 },
    { value: 2 },
    { value: 3 },
    { value: 4 },
    { value: 5 },
    { value: 6 },
  ]}
  gap={10}
  minColWidth={100}
>
  {({ value }) => {
    return (
      <div style={{ background: '#efefef', textAlign: 'center' }}>
        {value}
      </div>
    )
  }}
</Grid>

Specifing a Maximum Column Width

<Grid
  data={[
    { value: 1 },
    { value: 2 },
    { value: 3 },
    { value: 4 },
    { value: 5 },
    { value: 6 },
  ]}
  gap={10}
  minColWidth={250}
  maxColWidth={300}
>
  {({ value }, i, columnWidth) => {
    return (
      <div style={{ background: '#efefef', textAlign: 'center' }}>
        {value}
        <div style={{ fontSize: '0.7rem' }}>
          width: {columnWidth.toFixed(2)}
        </div>
      </div>
    )
  }}
</Grid>

<Grid
  data={[
    { value: 1 },
    { value: 2 },
    { value: 3 },
    { value: 4 },
    { value: 5 },
    { value: 6 },
  ]}
  gap={10}
  minColWidth={250}
  maxColWidth={300}
>
  {({ value }, i, columnWidth) => {
    return (
      <div style={{ background: '#efefef', textAlign: 'center' }}>
        {value}
        <div style={{ fontSize: '0.7rem' }}>
          width: {columnWidth.toFixed(2)}
        </div>
      </div>
    )
  }}
</Grid>

Custom Horizontal and Vertical Gap Spacing

<Grid
  data={[
    { value: 1 },
    { value: 2 },
    { value: 3 },
    { value: 4 },
    { value: 5 },
    { value: 6 },
  ]}
  gap={{
    x: 10,
    y: 50,
  }}
  minColWidth={160}
  maxColWidth={200}
>
  {({ value }, i, columnWidth) => {
    return (
      <div style={{ background: '#efefef', textAlign: 'center' }}>
        {value}
        <div style={{ fontSize: '0.7rem' }}>
          width: {columnWidth.toFixed(2)}
        </div>
      </div>
    )
  }}
</Grid>

<Grid
  data={[
    { value: 1 },
    { value: 2 },
    { value: 3 },
    { value: 4 },
    { value: 5 },
    { value: 6 },
  ]}
  gap={{
    x: 10,
    y: 50,
  }}
  minColWidth={160}
  maxColWidth={200}
>
  {({ value }, i, columnWidth) => {
    return (
      <div style={{ background: '#efefef', textAlign: 'center' }}>
        {value}
        <div style={{ fontSize: '0.7rem' }}>
          width: {columnWidth.toFixed(2)}
        </div>
      </div>
    )
  }}
</Grid>

Custom Column Width Weightings

description: weighted average of column width's min/max balance.
1 is more lenient towards maximum column width, meaning wider columns.
0 is more lenient towards minimum column width, meaning skinnier columns

value: from 0 to 1
defaultValue: 0.5

Weight = 1

<Grid
  data={[
    { value: 1 },
    { value: 2 },
    { value: 3 },
    { value: 4 },
    { value: 5 },
    { value: 6 },
  ]}
  gap={10}
  minColWidth={160}
  maxColWidth={200}
  minMaxWeight={1}
>
  {({ value }, i, columnWidth) => {
    return (
      <div style={{ background: '#efefef', textAlign: 'center' }}>
        {value}
        <div style={{ fontSize: '0.7rem' }}>
          width: {columnWidth.toFixed(2)}
        </div>
      </div>
    )
  }}
</Grid>

<Grid
  data={[
    { value: 1 },
    { value: 2 },
    { value: 3 },
    { value: 4 },
    { value: 5 },
    { value: 6 },
  ]}
  gap={10}
  minColWidth={160}
  maxColWidth={200}
  minMaxWeight={1}
>
  {({ value }, i, columnWidth) => {
    return (
      <div style={{ background: '#efefef', textAlign: 'center' }}>
        {value}
        <div style={{ fontSize: '0.7rem' }}>
          width: {columnWidth.toFixed(2)}
        </div>
      </div>
    )
  }}
</Grid>

Weight = 0

<Grid
  data={[
    { value: 1 },
    { value: 2 },
    { value: 3 },
    { value: 4 },
    { value: 5 },
    { value: 6 },
  ]}
  gap={10}
  minColWidth={160}
  maxColWidth={200}
  minMaxWeight={0}
>
  {({ value }, i, columnWidth) => {
    return (
      <div style={{ background: '#efefef', textAlign: 'center' }}>
        {value}
        <div style={{ fontSize: '0.7rem' }}>
          width: {columnWidth.toFixed(2)}
        </div>
      </div>
    )
  }}
</Grid>

<Grid
  data={[
    { value: 1 },
    { value: 2 },
    { value: 3 },
    { value: 4 },
    { value: 5 },
    { value: 6 },
  ]}
  gap={10}
  minColWidth={160}
  maxColWidth={200}
  minMaxWeight={0}
>
  {({ value }, i, columnWidth) => {
    return (
      <div style={{ background: '#efefef', textAlign: 'center' }}>
        {value}
        <div style={{ fontSize: '0.7rem' }}>
          width: {columnWidth.toFixed(2)}
        </div>
      </div>
    )
  }}
</Grid>

Wrappable Fluid Grid

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Properties

Simplest usage

Basic usage

Specifing a Maximum Column Width

Custom Horizontal and Vertical Gap Spacing

Custom Column Width Weightings

Weight = 1

Weight = 0

Properties