Grid
How to use the Grid block in the Meditative Folks Theme.
Grid
At a glance
Arranges child blocks in a responsive grid with configurable columns and spacing.
Used in
- Header (via theme blocks)
- Custom section
- Home
Settings
Mobile
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Columns (mobile) | How many columns show on phones. | 1 | custom grid template == blank |
| Custom columns (mobile) | Override the column slider. Enter column sizes only (e.g. 50px auto, 1fr 2fr). For rows and columns together, use shorthand with a slash (e.g. auto / 50px auto). Do not include grid-template-columns: or a semicolon. | — | Always |
Tablet
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Columns (tablet) | How many columns show on tablets. | 2 | custom grid template tablet == blank |
| Custom columns (tablet) | Override the column slider. Enter column sizes only (e.g. 50px auto, 1fr 2fr). For rows and columns together, use shorthand with a slash (e.g. auto / 50px auto). Do not include grid-template-columns: or a semicolon. | — | Always |
Desktop
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Columns (desktop) | How many columns show on desktop. | 3 | custom grid template desktop == blank |
| Custom columns (desktop) | Override the column slider. Enter column sizes only (e.g. 50px auto, 1fr 2fr). For rows and columns together, use shorthand with a slash (e.g. auto / 50px auto). Do not include grid-template-columns: or a semicolon. | — | Always |
| Gap | Controls “Gap” on the storefront. Open the theme editor to preview live. | 12 | Always |
Mobile alignment
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Justify items | Controls “Justify items” on the storefront. Open the theme editor to preview live. | center | Always |
| Align items | Controls “Align items” on the storefront. Open the theme editor to preview live. | center | Always |
Tablet alignment
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Justify items | Controls “Justify items” on the storefront. Open the theme editor to preview live. | center | Always |
| Align items | Controls “Align items” on the storefront. Open the theme editor to preview live. | center | Always |
Desktop alignment
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Justify items | Controls “Justify items” on the storefront. Open the theme editor to preview live. | center | Always |
| Align items | Controls “Align items” on the storefront. Open the theme editor to preview live. | center | Always |
Layout settings
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Padding top | Adds empty space (padding top) around the section content. | 0 | Always |
| Padding bottom | Adds empty space (padding bottom) around the section content. | 0 | Always |
| Padding left | Adds empty space (padding left) around the section content. | 0 | Always |
| Padding right | Adds empty space (padding right) around the section content. | 0 | Always |
Setting details
Each control from the tables above, explained simply:
Columns (mobile)
How many columns show on phones. Default: 1. This control appears when: custom grid template == blank.
Custom columns (mobile)
Override the column slider. Enter column sizes only (e.g. 50px auto, 1fr 2fr). For rows and columns together, use shorthand with a slash (e.g. auto / 50px auto). Do not include grid-template-columns: or a semicolon. Default: —.
Columns (tablet)
How many columns show on tablets. Default: 2. This control appears when: custom grid template tablet == blank.
Custom columns (tablet)
Override the column slider. Enter column sizes only (e.g. 50px auto, 1fr 2fr). For rows and columns together, use shorthand with a slash (e.g. auto / 50px auto). Do not include grid-template-columns: or a semicolon. Default: —.
Columns (desktop)
How many columns show on desktop. Default: 3. This control appears when: custom grid template desktop == blank.
Custom columns (desktop)
Override the column slider. Enter column sizes only (e.g. 50px auto, 1fr 2fr). For rows and columns together, use shorthand with a slash (e.g. auto / 50px auto). Do not include grid-template-columns: or a semicolon. Default: —.
Gap
Controls “Gap” on the storefront. Open the theme editor to preview live. Default: 12.
Justify items
Controls “Justify items” on the storefront. Open the theme editor to preview live. Default: center.
Align items
Controls “Align items” on the storefront. Open the theme editor to preview live. Default: center.
Justify items
Controls “Justify items” on the storefront. Open the theme editor to preview live. Default: center.
Align items
Controls “Align items” on the storefront. Open the theme editor to preview live. Default: center.
Justify items
Controls “Justify items” on the storefront. Open the theme editor to preview live. Default: center.
Align items
Controls “Align items” on the storefront. Open the theme editor to preview live. Default: center.
Padding top
Adds empty space (padding top) around the section content. Default: 0.
Padding bottom
Adds empty space (padding bottom) around the section content. Default: 0.
Padding left
Adds empty space (padding left) around the section content. Default: 0.
Padding right
Adds empty space (padding right) around the section content. Default: 0.
Tips
- Place this block inside a wrapper if it should only show on certain screen sizes.
- Preview in the theme editor on mobile and desktop.