# `gradio_grid`
<div style="display: flex; gap: 7px;">
<a href="https://pypi.org/project/gradio-grid/" target="_blank"><img alt="PyPI" src="https://img.shields.io/pypi/v/gradio-grid"></a>
<a href="https://huggingface.co/spaces/dwancin/gradio_grid" target="_blank"><img alt="Demo" src="https://img.shields.io/badge/%F0%9F%A4%97%20Demo-%23097EFF?style=flat&logoColor=black"></a>
<a href="https://github.com/dwancin/gradio-grid" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/Repository-white?logo=github&logoColor=black"></a>
</div>
Grid is a layout element within Blocks that renders all children in a two dimensional grid system.
## Installation
```bash
pip install gradio_grid
```
## Usage Example
```python
import gradio as gr
from gradio_grid import Grid
with gr.Blocks() as demo:
with Grid(columns=2):
gr.Textbox()
gr.Textbox()
gr.Textbox()
gr.Textbox()
with Grid(columns=3):
gr.Image()
gr.Image()
gr.Image()
gr.Image()
gr.Image()
gr.Image()
demo.launch()
```
### Initialization
<table>
<thead>
<tr>
<th align="left">name</th>
<th align="left" style="width: 25%;">type</th>
<th align="left">default</th>
<th align="left">description</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left"><code>variant</code></td>
<td align="left" style="width: 25%;">
```python
"default" | "panel"
```
</td>
<td align="left"><code>"default"</code></td>
<td align="left">Grid type, 'default' (no background) or 'panel' (gray background color and rounded corners).</td>
</tr>
<tr>
<td align="left"><code>visible</code></td>
<td align="left" style="width: 25%;">
```python
bool
```
</td>
<td align="left"><code>True</code></td>
<td align="left">If False, the grid will be hidden.</td>
</tr>
<tr>
<td align="left"><code>elem_id</code></td>
<td align="left" style="width: 25%;">
```python
str | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left">An optional string that is assigned as the id of this element in the HTML DOM. Can be used for targeting CSS styles.</td>
</tr>
<tr>
<td align="left"><code>elem_classes</code></td>
<td align="left" style="width: 25%;">
```python
list[str] | str | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left">An optional string or list of strings that are assigned as the class of this element in the HTML DOM. Can be used for targeting CSS styles.</td>
</tr>
<tr>
<td align="left"><code>render</code></td>
<td align="left" style="width: 25%;">
```python
bool
```
</td>
<td align="left"><code>True</code></td>
<td align="left">If False, this layout will not be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.</td>
</tr>
<tr>
<td align="left"><code>columns</code></td>
<td align="left" style="width: 25%;">
```python
int
```
</td>
<td align="left"><code>2</code></td>
<td align="left">Defines the number of columns in the grid.</td>
</tr>
</tbody></table>
Raw data
{
"_id": null,
"home_page": null,
"name": "gradio-grid",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.8",
"maintainer_email": null,
"keywords": "gradio-custom-component, gradio-template-Row, grid, layout, two-dimensional",
"author": "Daniel Ialcin Misser Westergaard",
"author_email": null,
"download_url": null,
"platform": null,
"description": "# `gradio_grid`\n<div style=\"display: flex; gap: 7px;\">\n <a href=\"https://pypi.org/project/gradio-grid/\" target=\"_blank\"><img alt=\"PyPI\" src=\"https://img.shields.io/pypi/v/gradio-grid\"></a>\n <a href=\"https://huggingface.co/spaces/dwancin/gradio_grid\" target=\"_blank\"><img alt=\"Demo\" src=\"https://img.shields.io/badge/%F0%9F%A4%97%20Demo-%23097EFF?style=flat&logoColor=black\"></a>\n <a href=\"https://github.com/dwancin/gradio-grid\" target=\"_blank\"><img alt=\"Static Badge\" src=\"https://img.shields.io/badge/Repository-white?logo=github&logoColor=black\"></a>\n</div>\n\nGrid is a layout element within Blocks that renders all children in a two dimensional grid system.\n\n## Installation\n\n```bash\npip install gradio_grid\n```\n\n## Usage Example\n\n```python\nimport gradio as gr\nfrom gradio_grid import Grid\n\nwith gr.Blocks() as demo:\n with Grid(columns=2):\n gr.Textbox()\n gr.Textbox()\n gr.Textbox()\n gr.Textbox()\n \n with Grid(columns=3):\n gr.Image()\n gr.Image()\n gr.Image()\n gr.Image()\n gr.Image()\n gr.Image()\n\ndemo.launch()\n```\n\n### Initialization\n\n<table>\n<thead>\n<tr>\n<th align=\"left\">name</th>\n<th align=\"left\" style=\"width: 25%;\">type</th>\n<th align=\"left\">default</th>\n<th align=\"left\">description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td align=\"left\"><code>variant</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\n\"default\" | \"panel\"\n```\n\n</td>\n<td align=\"left\"><code>\"default\"</code></td>\n<td align=\"left\">Grid type, 'default' (no background) or 'panel' (gray background color and rounded corners).</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>visible</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nbool\n```\n\n</td>\n<td align=\"left\"><code>True</code></td>\n<td align=\"left\">If False, the grid will be hidden.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>elem_id</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nstr | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\">An optional string that is assigned as the id of this element in the HTML DOM. Can be used for targeting CSS styles.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>elem_classes</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nlist[str] | str | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\">An optional string or list of strings that are assigned as the class of this element in the HTML DOM. Can be used for targeting CSS styles.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>render</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nbool\n```\n\n</td>\n<td align=\"left\"><code>True</code></td>\n<td align=\"left\">If False, this layout will not be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>columns</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nint\n```\n\n</td>\n<td align=\"left\"><code>2</code></td>\n<td align=\"left\">Defines the number of columns in the grid.</td>\n</tr>\n</tbody></table>\n",
"bugtrack_url": null,
"license": null,
"summary": "Grid is a layout element within Blocks that renders all children in a two dimensional grid system.",
"version": "1.0.2",
"project_urls": {
"Changelog": "https://github.com/dwancin/gradio-grid/releases"
},
"split_keywords": [
"gradio-custom-component",
" gradio-template-row",
" grid",
" layout",
" two-dimensional"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "814c1400b3061a9ffebc5d3ed95f27375a1f93f24ced87ed8f943ab6e64c9b4c",
"md5": "9d8745962c59b0d12f23729ab6db2b28",
"sha256": "ee1c51d45b7e9b269f07c6354c4db71a049ba0f72635b7c8e9a349dd048f6757"
},
"downloads": -1,
"filename": "gradio_grid-1.0.2-py3-none-any.whl",
"has_sig": false,
"md5_digest": "9d8745962c59b0d12f23729ab6db2b28",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.8",
"size": 6239,
"upload_time": "2024-05-08T07:00:24",
"upload_time_iso_8601": "2024-05-08T07:00:24.695917Z",
"url": "https://files.pythonhosted.org/packages/81/4c/1400b3061a9ffebc5d3ed95f27375a1f93f24ced87ed8f943ab6e64c9b4c/gradio_grid-1.0.2-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-05-08 07:00:24",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "dwancin",
"github_project": "gradio-grid",
"travis_ci": false,
"coveralls": false,
"github_actions": false,
"lcname": "gradio-grid"
}
JSON
