# Customize a Layout

Select a layout to start customizing it.\
\
Any layout type customization options includes [unit customization](https://help.parta.io/no-code-editor/edit-units/customise-a-unit) options.

### Customize a Cells Layout

Select a Cells layout to start customizing it.

<figure><img src="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2F6IoZ0UzJ5fVjk81ChIot%2FCustomize_a_Layout.01.png?alt=media&#x26;token=917f3b3a-4d2b-4bc9-bd51-9ccf9e3491c6" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="50">№</th><th width="200.199951171875">Action</th><th>Description</th></tr></thead><tbody><tr><td>1</td><td>Complex list</td><td><ul><li>Click the <strong>Make repeatable</strong> icon at the Grid tab.</li></ul><p>An <strong>Add repeatable item</strong> icon will appear.</p><p></p><p>The cells layout will be marked with the <strong>Complex list</strong> icon and will become a template for the list.</p></td></tr><tr><td>2</td><td>Edit grid</td><td><ul><li>Click the <strong>gear</strong> icon in the upper left corner of the block;</li><li>Use the keyboard shortcut <strong>Cmd (Ctrl) + E</strong>.</li></ul><p></p><p>Cells editing mode will appear:<br></p><ul><li>Adjust the columns / rows number and their size;</li><li>Click <strong>X</strong> to close the Cells editing.</li></ul></td></tr><tr><td>3</td><td>Add row</td><td><ul><li>Go to the context menu and select the <strong>Add a row above / below</strong> options;</li><li>Use the keyboard shortcut <strong>Cmd (Ctrl) + ↑</strong> to add a row above;</li><li>Use the keyboard shortcut <strong>Cmd (Ctrl) + ↓</strong> to add a row below;</li><li>Click <strong>+</strong> at the grid;</li><li>Click <strong>+</strong> at the <strong>Row detailed settings</strong> window. </li></ul></td></tr><tr><td>4</td><td>Remove row</td><td><ul><li>Click <strong>-</strong> at the <strong>Grid</strong> tab;</li><li>Click <strong>-</strong> at the <strong>Edit grid</strong> mode;</li><li>Click <strong>-</strong> at the <strong>Row detailed settings</strong> window.</li></ul></td></tr><tr><td>5</td><td>Rows size</td><td><ul><li>Specify the row height in pixels, percents or fractions (fractional units).</li></ul></td></tr><tr><td>6</td><td>Reset to auto size</td><td><ul><li>Set the row height to the default value.</li></ul></td></tr><tr><td>7</td><td>Gap between Rows </td><td><ul><li>Specify the value of spacing between rows in pixels.</li></ul></td></tr><tr><td>8</td><td>Rows advanced settings</td><td><ul><li>Click the icon to open detailed rows settings.</li></ul></td></tr><tr><td>9</td><td>Rows size</td><td><ul><li>Set the minimum row height in pixels below which it will not decrease.</li></ul></td></tr><tr><td>10</td><td>Detailed rows</td><td><ul><li>Click <strong>Detailed</strong> to specify the settings for each row separately.</li></ul></td></tr><tr><td>11</td><td>Columns</td><td>Configures similar to rows.</td></tr></tbody></table>

### Customize a Container Layout

Select a Container layout to start customizing it.

<figure><img src="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2FCSL9tKQER5l6636UmihW%2FCustomize_a_Layout.02.png?alt=media&#x26;token=28a992a2-9ddd-4904-b4d7-ef1986c9955c" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="50">№</th><th width="200.39990234375">Action</th><th>Description</th></tr></thead><tbody><tr><td>1</td><td>Complex list</td><td><ul><li>Click the <strong>Make repeatable</strong> icon at the Grid tab.</li></ul><p>An <strong>Add repeatable item</strong> icon will appear.</p><p></p><p>The cells layout will be marked with the <strong>Complex list</strong> icon and will become a template for the list.</p></td></tr><tr><td>2</td><td>Direction</td><td><ul><li>Select the unit placement:</li></ul><ol><li><strong>→ Left to Right</strong> (default);</li><li><strong>↓ Top to Bottom</strong>;</li><li><strong>← Right to Left</strong> (Reverse);</li><li><strong>↑ Bottom to Top</strong> (Reverse).</li></ol></td></tr><tr><td>3</td><td>Wrap on overflow</td><td><ul><li>Click the <strong>Wrap on overflow</strong> icon to allow content to wrap when it crosses the container boundary.</li></ul></td></tr><tr><td>4</td><td>Distribution</td><td><ul><li>Select the distribution along the main axis from the drop-down menu:</li></ul><ol><li><strong>Start</strong>: Align to top;</li><li><strong>Center</strong>: Center all units;</li><li><strong>End</strong>: Align to bottom;</li><li><strong>Space Evenly</strong>: Equal spacing around all units;</li><li><strong>Space Around</strong>: Equal spacing between units with half-size margins;</li><li><strong>Space Between</strong>: Equal spacing between units, no margins.</li></ol></td></tr><tr><td>5</td><td>Alignment </td><td><ul><li>Select the unit alignment along the cross axis.</li></ul></td></tr><tr><td>6</td><td>Gap</td><td><ul><li>Specify the space between units in pixels.</li></ul></td></tr></tbody></table>

<br>