Grid Row Block
Overview
The Grid Row Block is a core layout component in the Phenix Design System that creates a flexible row container for organizing content in columns. It implements a responsive flexbox-based grid system and can be transformed into a slider/carousel for dynamic content presentation. The Grid Row Block is designed to work inside Container Blocks and serves as a parent for Grid Column Blocks.
Key Features
Layout Capabilities
- Flexbox Foundation: Built on CSS flexbox for powerful layout control
- Column Configuration: Set the number of columns per row with breakpoint-specific controls
- Alignment Options: Control both horizontal and vertical alignment of columns
- Distribution Settings: Determine how space is distributed between columns
- Responsive Controls: Configure different layouts for mobile, tablet, laptop, and desktop
- Order Control: Optionally reverse the order of columns on specific screen sizes
Slider Functionality
- Carousel Conversion: Transform any row into a slider with a simple toggle
- Slider Types: Choose between standard slider and continuous marquee
- Navigation Options: Enable/disable arrows, pagination, and scrollbar
- Autoplay Controls: Set autoplay with customizable speed and pause on hover
- Slide Configuration: Control slides per view, spacing, and transition effects
- Loop and Rewind: Options for infinite looping or rewind at ends
How to Use
- Add a Container Block to your page
- Inside the Container, add a Grid Row Block
- Configure the row's layout options in the toolbar:
- Set column count for different screen sizes
- Configure alignment and distribution
- Enable slider mode if needed
- Add Grid Column Blocks inside the row
- Adjust additional settings in the sidebar panels as needed
Block Settings
Toolbar Controls
The Grid Row Block provides the following controls in the top toolbar:
Control | Description |
---|---|
Columns Number | Dropdown with number inputs to set column count for different screen sizes (mobile, tablet, laptop, desktop) |
Flexbox Controls | Dropdown for configuring flexbox properties including: |
- Direction (row, column, reverse options)
- Alignment (horizontal and vertical)
- Distribution (start, center, end, space-between, space-around)
- Wrap behavior (wrap, nowrap) | | Slider Toggle | Button to convert the row into a carousel/slider | | Margin Controls | Dropdown for setting outer spacing with responsive options | | Padding Controls | Dropdown for setting inner spacing with responsive options | | Position Controls | Dropdown for setting position type and coordinates | | Border Controls | Dropdown for configuring border styles, widths, and colors | | Effects Controls | Dropdown for adding shadows, opacity, and other visual effects |
Sidebar Panels
Slider Options Panel
When slider mode is enabled, this panel appears with the following controls:
Control | Description |
---|---|
Slider Type | Select between standard slider or continuous marquee |
Slides Per View | Number of slides visible at once (can be fractional for partial slides) |
Space Between | Gap between slides in pixels |
Center Slides | Option to center active slide in view |
Navigation | Toggle for enabling/disabling navigation arrows |
Pagination | Toggle for enabling/disabling pagination dots |
Scrollbar | Toggle for enabling/disabling draggable scrollbar |
Autoplay | Toggle and speed control for automatic sliding |
Pause on Hover | Option to pause autoplay when cursor hovers over slider |
Loop | Toggle for infinite looping of slides |
Free Mode | Toggle for free-flowing slides without snap points |
Effect | Transition effect (slide, fade, cube, etc.) |
Speed | Transition speed in milliseconds |
Layout Options Panel
Control | Description |
---|---|
HTML ID | Text input for setting a custom ID (useful for anchors) |
Flexbox Settings | Tabs for configuring flexbox properties per screen size (mobile, tablet, laptop, desktop) |
Slider Toggle | Checkbox to enable/disable slider functionality |
Style Support | Toggle to enable/disable style options |
General Options Panel
When style support is enabled:
Control | Description |
---|---|
Style Options | Enable/disable various styling features including animations, padding, margin, border, and effects |
Technical Implementation
The Grid Row Block is implemented with the following key attributes:
// Core attributes
id: { type: "string", default: "" },
// Style-related objects
flexbox: { type: "object", default: {} },
typography: { type: "object", default: {} },
style: { type: "object", default: {} },
responsive: { type: "object", default: {} },
slider: { type: "object", default: {} }
The block renders as a div with the "row" class, plus any additional classes generated by the options renderer:
<div {...blockProps}>
<InnerBlocks.Content />
</div>
When slider mode is enabled, the row classes are modified to support the slider functionality.
Common Use Cases
Standard Grid Layout
The most common use of the Grid Row Block is to create a responsive grid layout:
- Add a Container Block to your page
- Add a Grid Row Block inside the container
- Configure the number of columns for different screen sizes (e.g., 1 column on mobile, 2 on tablet, 3 on desktop)
- Add Grid Column Blocks inside the row
- Place your content inside each column
Flexbox Alignment
To create a layout with specific alignment and distribution:
- Add a Grid Row Block to your page
- Open the Flexbox Controls dropdown in the toolbar
- Configure alignment (start, center, end) and distribution options
- Add Grid Column Blocks with your content
Content Slider
To transform a row of content into a carousel:
- Create a standard grid layout with columns and content
- Enable the Slider toggle in the toolbar
- Configure slider options in the sidebar panel
- Test the slider functionality in preview mode
Best Practices
Layout Structure
- Use the Columns Number dropdown to set appropriate column counts for different screen sizes
- Start with the mobile view (default) and then configure tablet (MD), laptop (LG), and desktop (XL) layouts
- Keep your row structure clean and avoid unnecessary nesting
- Use the flexbox controls to create precise alignments rather than adding extra markup
Slider Implementation
- Enable slider mode only when it adds value to the user experience
- Choose the appropriate slider type based on your content (standard for interactive content, marquee for continuous display)
- Configure navigation options based on your design requirements
- Test slider performance with actual content to ensure smooth operation
Responsive Design
- Configure different column counts for each breakpoint to optimize the layout
- Test your layouts on actual devices or using the browser's device emulation
- Consider content readability and usability at each screen size
- Use the responsive tabs in the sidebar to fine-tune layouts for each device
Style Management
- Enable style support only when you need to apply custom styling
- Use consistent spacing patterns throughout your design
- Apply styles purposefully to maintain visual hierarchy
- Keep style overrides minimal to ensure consistent design
Performance Considerations
- Enable only the features you need to keep the editor interface focused
- Optimize slider settings for performance (especially when using autoplay or effects)
- Test interactive elements to ensure they work as expected
- Consider page load performance when using multiple sliders
Related Blocks
- Container Block - Recommended parent container for grid rows
- Grid Column Block - Used inside grid rows to create column-based layouts
- Group Block - Alternative for flexible content grouping without grid structure
- Dynamic Query Block - Can be combined with grid rows for dynamic content layouts