\n```\n\n## Customizing the Grid\n\nA FluidGrid can have vertical and/or horizontal spacing between grid-cells. It \ncan also generate divider-borders between rows and/or columns. These borders \nare customizable using standard CSS border rules.\n\nAdditional flexbox CSS rules can also be added to customize both the flex \ncontainer and the flex items. Use normal CSS-in-Javascript syntax to add styles \nto the grid configuration. The component will calculate and generate the final \nCSS to achieve the 'goal' specified. This means the generated CSS may not be \nthe same as the props passed in!\n\n**See the [FluidGrid API](#fluidgrid-api) section below.**\n\n## Responsive FluidGrid Sample\n\nThe sample below is from the **\"Mixed Width Columns\"** demo available at:\n[allpro.github.io/react-fluid-grid](https://allpro.github.io/react-fluid-grid)\n
(Cosmetic props and styles removed for brevity.)\n\n\n \n Mixed-Width Sample Code (click to show)\n
\n
\n\n```jsx harmony\nimport React, { Fragment } from 'react'\nimport Typography from '@material-ui/core/Typography'\nimport FluidGrid from '@allpro/react-fluid-grid'\n\n// Verbose config options as a sample; often just `spacing` is needed\nconst gridConfig = {\n justify: 'flex-start',\n alignContent: 'stretch',\n alignItems: 'stretch',\n\n columnSpacing: 16,\n rowSpacing: 32,\n rowDivider: {\n width: 1,\n color: 'blue',\n },\n}\n\nfunction ReactFluidGridExample() {\n return (\n \n\n \n {'flexBasis=\"400px\" minWidth=\"50%\"'}\n \n\n \n {'flexBasis=\"400px\" minWidth=\"50%\"'}\n \n\n \n {'flexBasis=\"250px\" minWidth=\"33%\"'}\n \n\n \n {'flexBasis=\"250px\" minWidth=\"33%\"'}\n \n\n \n {'flexBasis=\"250px\" minWidth=\"33%\"'}\n \n\n \n {'minWidth=\"150px\"'}\n \n\n \n {'minWidth=\"150px\"'}\n \n\n \n {'minWidth=\"150px\"'}\n \n\n \n {'minWidth=\"150px\"'}\n \n\n \n )\n}\n\nexport default ReactFluidGridExample\n```\n \n\n\n## Live Demos\n\nTry the demos at: https://allpro.github.io/react-fluid-grid\n\nPlay with the demo code at:\nhttps://codesandbox.io/s/github/allpro/react-fluid-grid/tree/master/example\n\nIf you pull or fork the repo, you can run the demo like this:\n- In the root folder, run `npm start`\n- In a second terminal, in the `/example` folder, run `npm start`\n- The demo will start at http://localhost:3000\n- Changes to the component _or_ the demo will auto-update the browser\n\n\n## Installation\n\n- NPM: `npm install @allpro/react-fluid-grid`\n- Yarn: `yarn add @allpro/react-fluid-grid`\n- CDN: Exposed global is `FormManager`\n - Unpkg: ``\n - JSDelivr: ``\n\n---\n\n## FluidGrid API\n\nFluidGrid has 2 components, which are differentiated by setting either a \n`container` or `item` prop.\n\n- **`container`** {boolean} `[true]`\n
Sets component to be a 'FluidGrid Container'\n\n- **`item`** {boolean} `[false]`\n
Sets component to be a 'FluidGrid Item'\n\nSample of `container` and `item` use to differentiate component mode.\n\n```javascript\n\n \n \n \n\n \n \n \n\n```\n\nThe props for _each component-mode_ are categorized for clarity. \n**All props are optional**, but if _no props_ are specified, the generated\noutput will not be useful!\n\n\n### `FluidGrid container` Props\n\n\n\n Special Props (expand)
\n\n These props are unique to the FluidGrid container\n.
\n\n- **`component`** {Component|string} `[\"div\"]`\n
The wrapper-element generated by FluidGrid. \n\n- **`containerOverflow`** {string} `[\"\"]`\n
Value must be a valid CSS measurement, like \"4px\" or \"1em\"\n
This increases the container size to contain visual effects that extend\n beyond the boundary of items, like a drop-shadow or glow effect. \n\n- **`columnSpacing`** {integer|string} `[0]`\n
Horizontal spacing between items\n
Value must be a valid CSS measurement, like \"4px\" or \"1em\"\n
See [Spacing and Divider Logic](#spacing-and-divider-logic)\n\n- **`rowSpacing`** {integer|string} `[0]`\n
Vertical spacing between items\n
Value must be a valid CSS measurement, like \"4px\" or \"1em\"\n
See [Spacing and Divider Logic](#spacing-and-divider-logic)\n\n- **`spacing`** {integer|string} `[0]`\n
Horizontal and Vertical spacing between items.\n
Value must be a valid CSS measurement, like \"4px\" or \"1em\"\n
Is overridden by `columnSpacing` or `rowSpacing` props.\n
See [Spacing and Divider Logic](#spacing-and-divider-logic)\n\n- **`columnDivider`** {object} `[{ width: 0, style: 'solid', color: '#CFCFCF' }]`\n
CSS attributes for `border` to display between columns:\n - `width` MUST be an **integer**, representing a pixel value\n - `style` can be any valid CSS border-style value\n - `color` can be any valid CSS color value\n - Any key other than these 3 will be ignored\n - Unset keys will use the default values shown\n\n- **`rowDivider`** {object} `[{ style: 'solid' color: '#CFCFCF' }]`\n
CSS attributes for `border` to display between rows\n
Same attributes as shown above for **columnDivider**\n
Also see [Spacing and Divider Logic](#spacing-and-divider-logic)\n \n\n\n\n Extra Flexbox Props (expand)
\n\n These props are not used for grid logic,\nbut FluidGrid does set logical defaults for them.\nYou can use these props to override these defaults.
\n\n- **`justifyContent`** _or_ **`justify`** {string} `[\"flex-start\"]`\n
Flexbox rule for grid-container.\n
The `justify` alias is for consistency with Material-UI Grid.\n\n- **`alignContent`** {string} `[\"stretch\"]`\n
Flexbox rule for grid-container.\n\n- **`alignItems`** {string} `[\"stretch\"]`\n
Flexbox rule for grid-container.\n \n\n\n\n Default Flexbox-Item Props (expand)
\n\n Flexbox-logic props for grid-items can \nbe set on the grid-container as 'defaults' for all items.\nThese defaults can be overridden on individual grid-items.
\n\n- **`flexGrow`** {integer} `[null]`\n
See [`FluidGrid item` Props](#fluidgrid-items-props) for description\n\n- **`flexShrink`** {integer} `[null]`\n
See [`FluidGrid item` Props](#fluidgrid-items-props) for description\n\n- **`flexBasis`** {string} `[\"\"]`\n
See [`FluidGrid item` Props](#fluidgrid-items-props) for description\n\n- **`minWidth`** {string} `[\"\"]`\n
See [`FluidGrid item` Props](#fluidgrid-items-props) for description\n\n- **`maxWidth`** {string} `[\"\"]`\n
See [`FluidGrid item` Props](#fluidgrid-items-props) for description\n \n\n\n\n Styling Props (expand)
\n\n- **`className`** {string} `[null]`\n
Class to apply to grid-container.\n\n- **`style`** {object} `[null]`\n
Styles that will be assigned to the grid-container.\n \n\n\n### `FluidGrid item` Props\n\n\n Special Props (expand)
\n\n These props are unique to FluidGrid items.
\n\n- **`component`** {Component|string} `[\"div\"]`\n
The wrapper-element for the grid-item generated by FluidGrid. \n \n\n\n\n Flexbox-Logic Props (expand)
\n\n These props are used as inputs to FluidGrid logic for the final CSS.\n They may or may not translate directly to a CSS rule.\n For example, setting minWidth=\"300px\" can generate CSS like \n flex: 1 0 300px;, depending on what other props are set.\n
\n\n- **`flexGrow`** {integer} `[null]`\n
Flexbox logic prop for grid-item.\n\n- **`flexShrink`** {integer} `[null]`\n
Flexbox logic prop for grid-item.\n\n- **`flexBasis`** {string} `[\"\"]`\n
Flexbox logic prop for grid-item.\n\n- **`minWidth`** {string} `[\"\"]`\n
Flexbox logic prop for grid-item.\n\n- **`maxWidth`** {string} `[\"\"]`\n
Flexbox logic prop for grid-item.\n \n\n\n\n Styling Props (expand)
\n\n- **`className`** {string} `[null]`\n
Class to apply to grid-item wrapper.\n\n- **`style`** {object} `[null]`\n
Styles that will be assigned to the grid-item wrapper.\n \n\n\n## Spacing and Divider Logic\n\nFluidGrid items can have 'spacing' between them, both vertically and \nhorizontally. Row and column spacing can be different.\nThe same applies for 'divider rules' between columns and/or rows in the grid.\n\nFluidGrid adds spacing only _between_ items. \n**There is never any spacing on the top, bottom, or sides of the grid.** \nIf you want outer spacing, add margins to the 'container' element \nusing a 'style' or 'class' prop.\n\nThe width of Divider rules are _in addition to_ any spacing specified.\nDividers are displayed _in the middle_ of the spacing.\nFor example:\n\n```jsx harmony\n\n```\n\nThese props result in items _spaced_ a total of 14px apart,\n(10px-spacing + 4px-divider). \nThe spacing and divider are distributed like this:\n\n- Item #1 – right-edge\n- **5px spacing** (1/2 of 10px)\n- **4px divider**\n- **5px spacing** (1/2 of 10px)\n- Item #2 – left-edge\n\n#### Effect of spacing on width props\n\nWhen you specify a minWidth or flexBasis props, \nit affects the width of the _FluidGrid Item-wrapper_. \n**Spacing also must be taken into account because it too is\n_inside_ the Item-wrapper.**\nIt's not possible to _perfectly_ calculate the inner-width of item-wrappers,\ndue to how FluidGrid generates the layout. \nHowever FluidGrid is still far more accurate than a standard grid.\n\n_As a general guideline_, you should _add_ the spacing to the desired \nmin-width of your component. \nHowever there is no spacing at either end of each row, \nso this is only an approximation.\n\n##### Example\n\nGoals for this example:\n\n- `` components should _always_ be at least 300px wide\n- Have 30px spacing _between each card_\n- Have a 2px divider-rule, (at the _center_ of the item spacing)\n\nTo achieve this, **_add_ the 30px spacing to the 300px 'card' min-width**. \nThis will provide _slightly more than_ 300px card-width \nbecause grid-items at the start and end of each row \nonly have spacing on the _inside_.\nWe will ignore the _extra spacing_ created by the 2px divider-rule.\n\n```jsx harmony\n\n \n \n \n\n```\n\n###### 3 cards per row\n\n_At least_ 990px width is needed to fit 3 cards (3 x 330px).\nThis table shows widths when container is **_exactly_ 990px wide**:\n\n**1st Row**\n\n| Width | Item | \n|----------:|:----------------------| \n| 308.67px | MyCard #1 |\n| 15px | spacing (1/2 of 30px) |\n| 2px | divider-rule |\n| 15px | spacing (1/2 of 30px) |\n| 308.67px | MyCard #2 |\n| 15px | spacing (1/2 of 30px) |\n| 2px | divider-rule |\n| 15px | spacing (1/2 of 30px) |\n| 308.67px | MyCard #3 |\n| **990px** | **Container Width** |\n\nNOTE that the cards are _slightly more_ than 300px wide.\n\n###### 2 cards per row\n\n_At least_ 660px width is needed to fit 2 cards (2 x 330px).\nThis table shows widths when container is **_exactly_ 660px wide**:\n\n**1st Row**\n\n| Width | Item | \n|----------:|:----------------------| \n| 314px | MyCard #1 |\n| 15px | spacing (1/2 of 30px) |\n| 2px | divider-rule |\n| 15px | spacing (1/2 of 30px) |\n| 314px | MyCard #2 |\n| **660px** | **Container Width** |\n\n**2nd Row**\n\n| Width | Item | \n|----------:|:----------------------| \n| 660px | MyCard #3 |\n| **660px** | **Container Width** |\n\nNOTE that 1st-row cards are _even wider_ because there are fewer across,\nwhich means fewer 'spaces' between cards.\n\n###### 1 card per row\n\nWhen container is _less than_ 660px width, only 1 card can fit per row.\nThis table shows widths when container is **659px wide**:\n\n**1st Row**\n\n| Width | Item | \n|----------:|:----------------------| \n| 659px | MyCard #1 |\n| **659px** | **Container Width** |\n\n**2nd Row**\n\n| Width | Item | \n|----------:|:----------------------| \n| 659px | MyCard #2 |\n| **659px** | **Container Width** |\n\n**3rd Row**\n\n| Width | Item | \n|----------:|:----------------------| \n| 659px | MyCard #3 |\n| **659px** | **Container Width** |\n\n\n##### Layout Reflow\n\nAs the last example shows, when the container becomes **just 1px narrower** \nthan the _sum_ of item minWidths, the grid will _reflow_ all items.\nIt does not matter _why_ the container width changed!\n\n**FluidGrid reflow is more automatic and precise because\nit is NOT reliant on screen-width breakpoints.**\nIf there is an expandable sidebar that affects container width,\nthis will trigger a reflow the same as changing the window size.\n**All that matters is the container width.**\n\nFluidGrid is especially helpful in apps with _multiple grid layouts_, \nwith varying content width requirements. \nIt's very difficult to set media-query breakpoints that work optimally \nin such scenarios, if you care about the minimum-width of items.\n\n\n## Layout Tips & Tricks\n\nThis section provides tips for refining your layout,\nincluding advanced use of flexbox rules.\n\n\n### Using `flexBasis` + `minWidth`\n\nSetting _either_ `flexBasis` _or_ `minWidth` props \nwill generate _identical_ CSS for a FluidGrid item.\n_Both_ these rules affect 'min-width', so FluidGrid considers them equivalent.\nHowever, setting **_both_** `flexBasis` _and_ `minWidth` props is different.\n\nIt can be useful to _combine_ percentage widths with pixel-widths\nto prevent _packing_ many small componenets into a row \nwhen the container is very wide, like on a high-resolution monitor.\n\nAssume these goals for a grid:\n\n- Cards should _always_ be at least **250px wide**\n- Should have **24px spacing** between each item\n- Should show **3-items per row _MAX_**, regardless of container width\n\nTo achieve this, set _both_ pixel and percentage min-widths.\nAs suggested in \n[Effect of spacing on width-props](effect-of-spacing-on-width-props),\nwe'll _add_ the spacing to our desired inner-width: **250 + 24 = 274px**:\n\n```jsx harmony\n\n \n \n \n \n \n \n\n```\n\nSetting `flexBasis=\"448px\"` provides our _absolute_ min-width,\n(_unless_ container-width is less).\nThe `minWidth=\"33%\"` becomes a _secondary_ min-width.\nThis means _no more than 3 cards_ can ever appear on a single row.\n\n_Without_ `minWidth=\"33%\"`, a container 1400px wide would display\n5 items-per-row (5 x 274 (min) = 1370px).\nThis may look more _crowded_ than is desired.\n**_Minimum_ width is not always the same as _optimal_ width!**\n\n\n### Maintain Consistent Column Widths\n\nA grid of equal-width items usually _should not_\nhave items on the last row that _span_ multiple 'columns'.\nInstead, the width of last-row items should be consistent with those above.\n_After the last item_, remaining columns should display as 'empty'.\nIf vertical dividers are displayed, these should all display equally.\n\nAn old CSS trick for such scenarios is to use **'dummy items'** to fill\n_gaps_ in the last row of wrapped items.\nThis is easily achieved by adding _empty_ FluidGrid items.\nThe `placeholder` flag should be passed so FluidGrid does not pad these.\n\nThis example is similar to one above, **but with 2 placeholder-items added**:\n\n```jsx harmony\n\n \n \n \n \n \n \n\n```\n\nThe `minWidth=\"33%\"` prop means there will never be more than 3 items per row.\nIf the container is wide enough, the 1st row contains 3 cards,\nleaving only MyCard #4 in the 2nd row. \n**By default, MyCard #4 would _stretch_ to fill the entire 2nd row.**\n\nThe 2 placeholder-items prevent this.\nThere are now 3 items on the 2nd row, so MyCard #4 will be the same width\nas MyCard #1 above it.\nThe column-divider rules will also extend between these placeholders,\ncreating a more refined look. (This can be changed though.)\n\nWhen using placeholders, add enough to handle the \n_maximum_ number of 'blank columns' your grid may ever have at the end.\n
**It's OK to have extra placeholders — unneeded ones are invisible.**\n\n\n### Control Item Expansion\n\nBy default, every item will _stretch_ to fill each row.\nAll items grow proportionally — as flexbox specifies.\nThis behaviour can be changed by adding a `flexGrow` prop.\n\nBy default, FluidGrid applies `flexGrow: 1` to all items,\n(unless a maxWidth is set). \nThis causes all item items to grow/stretch equally.\nThe flexGrow values affect _proportionality_, so an item with `flexGrow={2}`\nwill grow beyond its min-width at _twice_ the rate of the default.\nFor example:\n\n```jsx harmony\n\n \n \n \n\n```\n\n_Without_ the `flexGrow` props shown, all items would stretch equally,\nso _each_ would become 400px wide to _fill_ the 1200px container-width.\n\nHowever with the `flexGrow` props shown above:\n\n- CardB will grow 3x as fast as CardA\n- CardC will grow 2x as fast as CardB; and 6x as fast as CardA\n\nThis is how the grid would auto-size items:\n\n| Width | Item (minWidth + Growth) | \n|-----------:|:-------------------------| \n| 330px | CardA (300 + 30) |\n| 390px | CardB (300 + 90) |\n| 480px | CardC (300 + 180) |\n| **1200px** | **Container Width** |\n\nWhat if you want some cards to **not grow at all**, —\n_except_ when necessary to fill the grid?\nInstead, _other cards_ should grow to fill the row.\nThis can be achieved by using large flexGrow numbers, like this:\n\n```jsx harmony\n\n \n \t\n \n\n \n \t\n \n\n \n \t\n \n\n \n \t\n \n\n```\n\nIf the container is only **700px wide**, _CardA_Small_ will grow to fill row-1,\nbecause there is not enough room to also fit _CardB_Large_.\n\nIf the container is **900px wide**, both _CardA_Small_ and _CardB_Large_ \nwill fit on row-1, **with 160px of extra room**.\nBecause _CardB_Large_ has `flexGrow={99}`, it will grow **99-times faster** than\n_CardA_Small_. \nThis means _CardA_Small_ will stretch **just 1.6px** (1% of 160px), \nwhile _CardB_Large_ will stretch **158.4px** (99% of 160px).\n\nNormally most items in a grid should be able to stretch, \nor else they cannot _fill the row_ when the container is narrow, like on mobile.\nIf you want **-0- stretching**, add a maxWidth prop like \n`minWidth=\"240px\" maxWidth=\"240px\"`. \nHowever, this prevent _any_ stretching even when the item is on a row all by \nitself, which will leave _gaps_ in the grid. \n\n\n### Max-Width and Flex-Shrink\n\nFluidGrid logic also handles props for `maxWidth` and `flexShrink`.\nThese work exactly as you'd expect them to.\nThis Readme does not include examples for these because they\nare not commonly needed for grid layouts.\n\n\n### Justification and Alignment Props\n\nFluidGrid applies reasonable flexbox defaults to container elements\nso that items _stretch_ both horizontally and vertically.\nThis provides a grid-like appearance.\nYou can override these defaults at the container level — see the API.\n\n\n### Other Flexbox props\n\nFluidGrid is primarily concerned with props that affect its calculations.\nIf you need additional flexbox rules for FluidGrid items,\nlike `alignSelf`, use a `style` or `class` prop to add them normally.\n\nBe careful to not apply styles that conflict with those\nauto-generated by FluidGrid. \nFor example, do not apply margins to items as it may cause unexpected results.\n\n\n### Media-Query Integration\n\nFluidGrid is _not_ designed to work directly with media-queries.\nHowever, if using a helper that provides breakpoint 'props' — like the \n[Material-UI withWidth() HOC](https://material-ui.com/layout/breakpoints/#withwidth) \n— then you can use this to _dynamically_ calculate FluidGrid props.\nThis is not normally necessary, but is simple to do:\n\n```jsx harmony\nimport withWidth, { isWidthUp } from '@material-ui/core/withWidth'\n\nconst minWidth = isWidthUp('md', this.props.width) ? '400px' : '300px'\n\nreturn (\n \n \n \n \n \n)\n\n```\n\n\n### Unexpected or Inadequate Results\n\nIf you use FluidGrid and find a usecase it can't handle well,\ncreate a sample and share it with me.\nIf practical, I'll update FluidGrid to better address it.\n\n---\n\n## Built With\n\n- [create-react-library](https://github.com/DimiMikadze/create-react-library) - \nA React component framework based on\n[create-react-app](https://github.com/facebook/create-react-app)\n\n## Contributing\n\nPlease read \n[CONTRIBUTING.md](https://github.com/allpro/react-fluid-grid/blob/master/CONTRIBUTING.md)\nfor details on our code of conduct, \nand the process for submitting pull requests to us.\n\n## Versioning\n\nWe use SemVer for versioning. For the versions available, \nsee the tags on this repository.\n\n## License\n\nMIT © [allpro](https://github.com/allpro)\n
See\n[LICENSE](https://github.com/allpro/react-fluid-grid/blob/master/LICENSE)\nfile for details\n\n\n[gzip-size-badge]: http://img.badgesize.io/https://cdn.jsdelivr.net/npm/@allpro/react-fluid-grid/umd/react-fluid-grid.min.js?compression=gzip\n[gzip-size]: http://img.badgesize.io/https://cdn.jsdelivr.net/npm/@allpro/react-fluid-grid/umd/react-fluid-grid.min.js\n\n[install-size-badge]: https://packagephobia.now.sh/badge?p=@allpro/react-fluid-grid\n[install-size]: https://packagephobia.now.sh/result?p=@allpro/react-fluid-grid\n\n[npm-badge]: http://img.shields.io/npm/v/@allpro/react-fluid-grid.svg?style=flat-round\n[npm]: https://www.npmjs.com/package/@allpro/react-fluid-grid\n\n[build-badge]: https://travis-ci.org/allpro/react-fluid-grid.svg?branch=master\n[build]: https://travis-ci.org/allpro/react-fluid-grid\n\n[coveralls-badge]: https://coveralls.io/repos/github/allpro/react-fluid-grid/badge.svg?branch=master\n[coveralls]: https://coveralls.io/github/allpro/react-fluid-grid?branch=master\n\n[license-badge]: https://badgen.now.sh/badge/license/MIT/blue\n[license]: https://github.com/allpro/react-fluid-grid/blob/master/LICENSE\n\n[donate-badge]: https://img.shields.io/badge/Donate-PayPal-green.svg?style=flat-round\n[donate]: https://paypal.me/KevinDalman\n","readmeFilename":"README.md"}