https://github.com/pikhovkin/dash-flexbox-grid

Wrapper around react-flexbox-grid for Plotly Dash
https://github.com/pikhovkin/dash-flexbox-grid

css-grid dash flexbox-grid plotly plotly-dash react react-components reactjs

Last synced: 11 days ago
JSON representation

Wrapper around react-flexbox-grid for Plotly Dash

• Host: GitHub
• URL: https://github.com/pikhovkin/dash-flexbox-grid
• Owner: pikhovkin
• License: mit
• Created: 2018-05-28T17:54:43.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2026-01-22T05:16:24.000Z (19 days ago)
• Last Synced: 2026-01-22T19:39:25.283Z (18 days ago)
• Topics: css-grid, dash, flexbox-grid, plotly, plotly-dash, react, react-components, reactjs
• Language: Python
• Homepage:
• Size: 518 KB
• Stars: 21
• Watchers: 1
• Forks: 1
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-dash - dash-flexbox-grid - Wrapper around react-flexbox-grid for Plotly Dash. (Component Libraries)

README

          
# dash-flexbox-grid

[![PyPI](https://img.shields.io/pypi/v/dash-flexbox-grid.svg)](https://pypi.org/project/dash-flexbox-grid/)

![PyPI - Python Version](https://img.shields.io/pypi/pyversions/dash_flexbox_grid.svg)

[![NPM](https://img.shields.io/npm/v/dash-flexbox-grid.svg)](https://www.npmjs.com/package/dash-flexbox-grid)

[![PyPI - License](https://img.shields.io/pypi/l/dash-flexbox-grid.svg)](./LICENSE)

Wrapper around [react-flexbox-grid][] for Plotly [Dash][]

### Installation

    pip install dash_flexbox_grid

### Usage

```python

    import dash

    import dash_flexbox_grid as dfx

    import dash_html_components as html

    

    

    app = dash.Dash('')

    app.scripts.config.serve_locally = True

    

    app.layout = dfx.Grid(id='grid', fluid=True, children=[

        dfx.Row(children=[

            dfx.Col(xs=12, lg=3, children=[

                html.Div('Hello,'), html.Div('World!')

            ])

        ]),

        dfx.Row(id='row', children=[

            dfx.Col(id='col', xs=6, lg=2, children=html.Div('Hello, World!')),

            dfx.Col(xs=6, lg=2, children=html.Div('Hello, World!'))

        ])

    ])

    

    

    if __name__ == '__main__':

        app.run_server(debug=True)

```

### Dash

Go to this link to learn about [Dash][].

See the [dash-component-boilerplate][] repo for more information.

[react-flexbox-grid]: https://github.com/roylee0704/react-flexbox-grid

[Dash]: https://github.com/plotly/dash

[dash-component-boilerplate]: https://github.com/plotly/dash-component-boilerplate