# Grid bento {% columns %} {% column width="58.333333333333336%" %} Use the **Grid bento** section to build unique layouts with flexible content and promo blocks

{% endcolumn %} {% column %} {% hint style="info" %} **Key features** Highly flexible grid layout 6 content block types Custom block height and width Images and autoplay videos Mobile and tablet layout options {% endhint %} {% hint style="info" %} **Blocks** Media and text Collection Countdown Product Product card Promo {% endhint %} {% endcolumn %} {% endcolumns %}

Grid layout

*** For the general gird layout, set the **gap between blocks** and the **row height** for desktop and mobile. _{Click section to find settings}


Gap	Use globals Custom
Row height	320 - 600px
Mobile row height	320 - 600px (applied as minimum)

### Grid items style Apply general styles for all grid items: adjust **card padding** around grid content, make the entire **card clickable**, and enable the **corner radius** and **border**. _{Click section to find settings}


Card padding	Use globals Custom
Make entire card clickable
Corner radius
Border

Add grid blocks

*** Add and re-arrange 5 different types of grid blocks. You can customize the horizontal and vertical span of each block to create unique collage layouts. Click **(+) Add block** to add grid blocks and use the drag handles **`⋮⋮`** to re-order blocks.

Media and text

Display text and buttons with a color, image, or autoplay video background. #### Layout _{Click Media and text block to find settings}


Horizontal span	1 - 4
Vertical span	1 - 2
Tablet horizontal span	1 - 2
Tablet vertical span	1 - 2
Mobile vertical span	1 - 2

#### Content layout _{Click Media and text block to find settings}


Max width	Full width Custom
Position	Top / Middle / Bottom Left / Center / Right
Mobile position	Top / Middle / Bottom Left / Center / Right
Alignment	Left / Center / Right
Mobile alignment	Left / Center / Right

#### Content _{Click Media and text block to find settings}


Overline	Add text for a small heading.
Overline size	1 - 4
Heading	Add text for a heading.
Heading size	1 - 4
Text	Add rich text.
Text size	1 - 4

#### Buttons _{Click Media and text block to find settings}


Pin button to bottom of card
Button type	Button Icon button
Link	Enter the URL for the button to link to.
Label	Add text to the button.
Size	XS S M L
Style	Solid Outline Text
Color scheme	Default Primary Secondary Soft Overlay Overlay soft
Full width	No All screen sizes Mobile only

#### Background _{Click Media and text block to find settings}


Background type	Color Image Video
Color
Background color	Color scheme Custom
Image
Image	Select or upload image.
Custom mobile image
Overlay opacity	0 - 100%
Color scheme	Use for overlay text and tint color.
Video
Video	Select or upload .mp4 file (recommended: > 10 seconds)
Video focal point	Select most important area of video content to keep centered and avoid unwanted clipping.
Custom mobile video	Optional: Upload alternate .mp4 file to best fit mobile devices.
Color scheme	Use for overlay text and tint color.

Collection

Feature one of your collections with background image or video, description, and button. You can display the number of products in the collection. #### Layout _{Click Collection block to find settings}


Horizontal span	1 - 4
Vertical span	1 - 2
Tablet horizontal span	1 - 2
Tablet vertical span	1 - 2
Mobile vertical span	1 - 2

#### Content layout _{Click Collection block to find settings}


Max width	Full width Custom
Position	Top / Middle / Bottom Left / Center / Right
Mobile position	Top / Middle / Bottom Left / Center / Right
Alignment	Left / Center / Right
Mobile alignment	Left / Center / Right

#### Content _{Click Collection block to find settings}


Collection	Select a collection from your Shopify admin.
Override collection name	Enter custom collection heading.
Heading size	1 - 4
Collection description	Enter subheading text with collection description.
Text size	1 - 4
Product count

#### Buttons _{Click Collection block to find settings}


Pin button to bottom of card
Button type	Button Icon button
Link	Enter the URL for the button to link to.
Label	Add text to the button.
Size	XS S M L
Style	Solid Outline Text
Color scheme	Default Primary Secondary Soft Overlay Overlay soft
Full width	No All screen sizes Mobile only

#### Background _{Click Collection block to find settings}


Media type	Collection (image) Image Video
Overlay opacity	0 - 100%
Color scheme	Use for overlay text and tint color.
Collection	Shows featured collection image from Shopify admin.
Image
Image	Select or upload image.
Custom mobile image
Video
Video	Select or upload .mp4 file (recommended: > 10 seconds)
Video focal point	Select most important area of video content to keep centered and avoid unwanted clipping.
Custom mobile video	Optional: Upload alternate .mp4 file to best fit mobile devices.

Countdown

Display media and text with a live countdown timer. #### Layout _{Click Countdown block to find settings}


Horizontal span	2 - 4
Vertical span	1 - 2
Tablet vertical span	1 - 2
Mobile vertical span	1 - 2

#### Content layout _{Click Countdown block to find settings}


Max width	Full width Custom
Position	Top / Middle / Bottom Left / Center / Right
Mobile position	Top / Middle / Bottom Left / Center / Right
Alignment	Left / Center / Right
Mobile alignment	Left / Center / Right

#### Countdown timer _{Click Countdown block to find settings}

Setting	Options
Timer placement	Top Bottom
Font	Heading Body
Text size	20 - 120px
Mobile text size	20 - 60px
Vertical gap	1 - 4

Setting	Description
Year	Enter the year of the end-date.
Month	Select the month of the end-date.
Day	Select the day of the end-date.
Hour	Select the hour of the end-time.
Minute	Select the minutes of the end-time.
Time zone	Choose to display the timer according to your Shop time zone or the Visitor time zone.
When complete	Leave timer at zero Hide timer

#### Content _{Click Countdown block to find settings}


Overline	Add text for a small heading.
Overline size	1 - 4
Heading	Add text for a heading.
Heading size	1 - 4
Text	Add rich text.
Text size	1 - 4

#### Buttons _{Click Countdown block to find settings}


Button type	Button Icon button
Link	Enter the URL for the button to link to.
Label	Add text to the button.
Size	XS S M L
Style	Solid Outline Text
Color scheme	Default Primary Secondary Soft Overlay Overlay soft
Full width	No All screen sizes Mobile only

#### Background _{Click Countdown block to find settings}


Background type	Color Image Video
Color
Background color	Color scheme Custom
Image
Image	Select or upload image.
Custom mobile image
Overlay opacity	0 - 100%
Color scheme	Use for overlay text and tint color.
Video
Video	Select or upload .mp4 file (recommended: > 10 seconds)
Video focal point	Select most important area of video content to keep centered and avoid unwanted clipping.
Custom mobile video	Optional: Upload alternate .mp4 file to best fit mobile devices.
Color scheme	Use for overlay text and tint color.

Product

Feature one of your products with background image or video, description, and button. You can display the number of products in the collection. #### Layout _{Click Product block to find settings}


Horizontal span	1 - 4
Vertical span	1 - 2
Tablet horizontal span	1 - 2
Tablet vertical span	1 - 2
Mobile vertical span	1 - 2

#### Content layout _{Click Product block to find settings}


Max width	Full width Custom
Position	Top / Middle / Bottom Left / Center / Right
Mobile position	Top / Middle / Bottom Left / Center / Right
Alignment	Left / Center / Right
Mobile alignment	Left / Center / Right

#### Content _{Click Product block to find settings}


Product	Select a product from your Shopify admin.
Product name size	1 - 6
Space below product name	1 - 8
Price size	1 - 4
Vendor	Enter subheading text with collection description.
Out of stock badge	1 - 4
Badge position	Above name Above price
Badge background color
Badge text color
Sale price color

#### Buttons _{Click Product block to find settings}


Pin button to bottom of card
Button type	Button Icon button
Link	Enter the URL for the button to link to.
Label	Add text to the button.
Size	XS S M L
Style	Solid Outline Text
Color scheme	Default Primary Secondary Soft Overlay Overlay soft
Full width	No All screen sizes Mobile only

#### Background _{Click Product block to find settings}


Media type	Collection (image) Image Video
Overlay opacity	0 - 100%
Color scheme	Use for overlay text and tint color.
Collection	Shows featured collection image from Shopify admin.
Image
Image	Select or upload image.
Custom mobile image
Video
Video	Select or upload .mp4 file (recommended: > 10 seconds)
Video focal point	Select most important area of video content to keep centered and avoid unwanted clipping.
Custom mobile video	Optional: Upload alternate .mp4 file to best fit mobile devices.

Product card

Display product card with color, image, or autoplay video background. #### Layout _{Click Product card block to find settings}


Horizontal span	1 - 4
Vertical span	1 - 2
Tablet horizontal span	1 - 2
Tablet vertical span	1 - 2
Mobile vertical span	1 - 2

#### Product card _{Click Product card block to find settings}


Product	Select one product to display as ca ard with a "View product" button.
Position	Top / Middle / Bottom Left / Center / Right
Mobile position	Top / Middle / Bottom


Image ratio	Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (3:2) Custom
Image width	80 - 140px
Mobile image width	60 - 120px
Card width (Desktop only)	270 - 420px

Setting	Options
Color scheme	Default Inverse Soft Accent Accent inverse Overlay Color scheme 1 Color scheme 2
Vendor
Out of stock badge
Badge background color
Badge text color
Sale price color
Card padding	Use globals Custom (1 - 8)
Corner radius
Button style	Solid Outline Text
Button color scheme	Default Primary Secondary Soft Overlay Overlay soft

#### Content _{Click Product card block to find settings}


Product	Select a product from your Shopify admin.
Product name size	1 - 6
Space below product name	1 - 8
Price size	1 - 4
Vendor	Enter subheading text with collection description.
Out of stock badge	1 - 4
Badge position	Above name Above price
Badge background color
Badge text color
Sale price color

#### Background _{Click Product card block to find settings}


Background type	Color Image Video
Color
Background color	Color scheme Custom
Image
Image	Select or upload image.
Custom mobile image
Overlay opacity	0 - 100%
Color scheme	Use for overlay text and tint color.
Video
Video	Select or upload .mp4 file (recommended: > 10 seconds)
Video focal point	Select most important area of video content to keep centered and avoid unwanted clipping.
Custom mobile video	Optional: Upload alternate .mp4 file to best fit mobile devices.
Color scheme	Use for overlay text and tint color.

Promo

Display text and buttons with a color, image, or autoplay video background. #### Layout _{Click Promo block to find settings}


Horizontal span	1 - 4
Vertical span	1 - 2
Tablet horizontal span	1 - 2
Tablet vertical span	1 - 2
Mobile vertical span	1 - 2

#### Content layout _{Click Promo block to find settings}


Max width	Full width Custom
Position	Top / Middle / Bottom Left / Center / Right
Mobile position	Top / Middle / Bottom Left / Center / Right
Alignment	Left / Center / Right
Mobile alignment	Left / Center / Right

#### Promo content _{Click Promo block to find settings}


Overline	Add text for a small heading.
Overline size	1 - 4
Promo text	Add text for a promo heading.
Promo text size	1 - 4
Text below	Add rich text.
Text size	1 - 4

Setting	Options
Color scheme	Default Inverse Soft Accent Accent inverse Overlay Color scheme 1 Color scheme 2
Border
Corner radius
Drop shadow

#### Button _{Click Promo block to find settings}


Pin button to bottom of card
Button type	Button Icon button
Link	Enter the URL for the button to link to.
Label	Add text to the button.
Size	XS S M L
Style	Solid Outline Text
Color scheme	Default Primary Secondary Soft Overlay Overlay soft
Full width	No All screen sizes Mobile only

#### Background _{Click Promo block to find settings}


Background type	Color Image Video
Color
Background color	Color scheme Custom
Image
Image	Select or upload image.
Custom mobile image
Overlay opacity	0 - 100%
Color scheme	Use for overlay text and tint color.
Video
Video	Select or upload .mp4 file (recommended: > 10 seconds)
Video focal point	Select most important area of video content to keep centered and avoid unwanted clipping.
Custom mobile video	Optional: Upload alternate .mp4 file to best fit mobile devices.
Color scheme	Use for overlay text and tint color.

Section styles

*** Customize general style options for the section and content area. Settings for **Content area** allow you to adjust the width, borders, and dropshadow of the container of the section content. _{Click section to find settings}

Content area

		Cover image
Full width	Section background and content span the screen's full width.	full-width.png
Full width padded	Section spans the screen's full width with some padding.	full-width-padded.png
Page width	Section background and content span the page width.	page-width.png

Setting	Options
Width	Full width Full width padded Page width
Full width on mobile	Available for Full width padded option.
Border	Top only Bottom only Both
Corner radius	Available for Full width padded and Page width options.
Dropshadow

Section

Setting	Options
Top padding	0 - 27
Bottom padding	0 - 27
Dividers	None Top only Bottom only Both
Force dividers full width
Color scheme	Default Inverse Soft Accent Accent inverse Overlay Color scheme 1 Color scheme 2
Anchor ID	Link directly to the section on any page. Learn more

[^1]: Modify [global button styles](https://help.fluorescent.co/section-studio/sections/global-styles/buttons) [^2]: Modify [global style colors](https://help.fluorescent.co/section-studio/sections/global-styles/colors) [^3]: Modify card padding in [global styles](https://help.fluorescent.co/section-studio/sections/global-styles/layout-and-spacing) [^4]: Modify option in [global styles](https://help.fluorescent.co/section-studio/global-styles/borders-and-styles#medium-elements) [^5]: Modify in [Global styles > Borders and styles > Large elements](https://help.fluorescent.co/section-studio/global-styles/borders-and-styles#large-elements)