Overview

A Responsive CSS Grid implementation, which can be used for layout implementations for web apps.

• True CSS Grid Layout - Harness the full power of modern CSS Grid layouts in Mendix Studio Pro
• Control responsive behavior - Exact placement or Mobile first Cascading 
• Visual Grid - Design mode previews complex layouts with named areas using intuitive CSS syntax
• Smart Item Placement - Choose from Auto-flow, Named Areas, Coordinates, or Span placement modes
• 8 Breakpoint System - Fine-tune layouts for every device (XS to 2XL/4K displays)
• Per-Item Responsiveness - Each grid item can have unique placement rules at different screen sizes
• Container-Level Control - Completely transform your grid structure at each breakpoint
• Dynamic Styling - Expression-based CSS classes and inline styles and CSS variables
• Easy styling - Dynamic classes like "css-grid--{breakpoint}" and other convenience classes give full control over content
• Debug Visualization - Toggle grid info, grid lines, gaps, and area boundaries during development
• Flexible Spacing - Precise control over gaps, alignment, and sizing at every level
• Hide Grid Content - Hide grid areas per breakpoint

Documentation

Typical usage scenario

Create dynamic responsive layouts for web applications, and have control of where other Mendix widgets are placed on the page.

Production ready versions:

1.2.2

Features:

• True CSS Grid - Full native CSS Grid support with all modern features

• Visual Named Areas - Design layouts visually with template syntax like "header header" "sidebar main"

• 8 Responsive Breakpoints - From mobile to 4K displays (XS → XXXXL)

• Smart Responsive Modes - Choose between exact breakpoints or mobile-first cascade

• Built-in Virtualization - Handle 100+ items smoothly

• 87.5% Faster Rendering - Processes only active breakpoints, not all 8

• Production-Ready - Optimized for enterprise applications

• WYSIWYG Preview - See exact layout in Mendix Studio Pro design mode

• Visual Debug Mode - Show grid info, lines, areas, and gaps while designing

• Breakpoint CSS Classes - Style responsively with .mx-grid--xs, .mx-grid--md, etc.

• Zero Custom CSS Required - Everything configurable through properties

• 4 Placement Modes - Auto, area, coordinates, or span-based positioning

• Per-Item Responsiveness - Each item can have different positions/sizes per breakpoint

• No CSS Knowledge Needed - Visual configuration for complex layouts

• Mobile-First Option - Progressive enhancement with cascade mode

• 4K Display Support - Ready for modern high-resolution screens

Limitations 

• Doesn't work for native applications, CSS Grid is not supported in react native.
• Can't use as nested grids
• Might conflict with other grid widgets or grid related CSS
• Support is on a best effort basis. However the code is available through github.

Dependencies 

None

Installation

Plug and play

Configuration

Just use it when you have some understanding of CSS Grid, otherwise just stick to using LayoutGrids and Mendix Layouts

For guidance on CSS Grid:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout

https://gridbyexample.com/examples/

https://css-tricks.com/snippets/css/complete-guide-grid/

Grid CSS Classes Overview

.css-grid //The main block class .css-grid--responsive //When breakpoints are enabled .css-grid--xs through css-grid--xxxxl //Active breakpoint modifiers .css-grid--virtualized //When virtualization is active .css-grid__item //Every grid item .css-grid__item--auto //Auto placement .css-grid__item--area //Named area placement .css-grid__item--coordinates //Line-based placement .css-grid__item--span //Span-based placement .css-grid__item--hidden //Hidden items .css-grid__item--placeholder //Placeholder for empty cells

Known bugs

Using the "tablet" view toggle button at the top of Mendix Studio pro to change device size in Design Mode sometimes results in flickering behavior.

Most likely this is due to misconfiguration of the widget. To test your device size responsiveness just scale up your properties panel. Re-sizing another panel will reduce the viewport size remainig for your page and will result in proper responsive downscaling. 

No known other bugs, if you find some let me know through the Mendix community Slack or email me.

Frequently Asked Questions

Q: Can you add this feature?

A: Possibly, if you want it quick, grab your wallet, if you just want it for the shinies pray to your Mendix gods

Q: Can you fix this bug?

A: Possibly, if you want it fixed quick, grab your wallet, or go to github and do a pull request and fix it yourself.

Q. My grid items are placed outside of my grid

A. You probably misconfigured your responsive areas and it's trying to place it in a grid template area name that no longer exists, or at grid line numbers that don't exist.

Q. My grid keeps flickering in the tablet preview mode

A. Probably related to misconfiguration or complex configuration. Look at known issues list for how to deal with it.

Q: Can you explain how this code works?

A: No, I'm busy with other things.

Q: Can you implement this widget for me?

A: No, I'm busy with other things.

Q: Can I contribute add features to this widget myself?

A: Yes you can via Github: https://github.com/Marnix-IxD/mx-css-grid