Grid Layout Setting for Multi-Device Responsive Pages
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Conventional program development devices have limitations in easily editing objects such as buttons, boxes, and grids, making it difficult to reposition, change parents, or reorder them, especially when developing multi-device responsive pages.
Innovation Solution
A grid layout setting method and computer-readable medium that allows users to intuitively set a grid layout through a graphical user interface, supporting multi-browser, multi-device, and multi-OS environments, enabling adaptive settings and generating responsive page templates for each device.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Ease of operation
If conventional program development devices are used, then basic programming functionality is provided, but editing objects (buttons, boxes, grids) is difficult and time-consuming
Solution Approach 1:
The development device segments the screen into a grid of editable regions, allowing users to independently manipulate objects within each grid cell. This segmentation enables intuitive repositioning, resizing, and reordering of UI objects without complex coding operations.
Solution Approach 2:
The grid layout system dynamically adapts to different device sizes and orientations, automatically adjusting the grid configuration for mobile, tablet, and desktop screens. This dynamic behavior eliminates manual coding for each device type while maintaining consistent object positioning.
2Manufacturing precision
If manual coding is used for layout configuration, then precise control is achieved, but development complexity and time consumption increase
Solution Approach 1:
The system generates responsive web pages by copying and adapting a master grid layout template across different device types. Users define the layout once for a reference device, and the system automatically generates adapted layouts for other devices, maintaining precision without manual coding for each configuration.
Solution Approach 2:
The grid system uses parameter-based configuration where users specify layout properties (grid columns, rows, cell sizes) as adjustable parameters rather than writing code. The system then automatically applies these parameter changes to generate the desired layout, reducing development complexity while maintaining precision.
3Adaptability or versatility
If device-specific layouts are manually configured, then optimal display for each device is achieved, but productivity decreases due to repetitive work
Solution Approach 1:
The grid layout system serves multiple device types (mobile, tablet, desktop) with a single unified configuration approach. Users define the layout once, and the system universally applies it across all device types through automatic adaptation, eliminating repetitive manual configuration work and significantly improving productivity.
Solution Approach 2:
The system performs preliminary action by pre-configuring grid templates and layout structures that can be automatically adapted to different devices. Users start with pre-defined grid patterns and only make necessary adjustments, rather than configuring everything from scratch for each device type, thereby boosting productivity while maintaining adaptability.
Data Source
AI summary
Grid layout setting method for multi device responsive page and program performing the same disclosed. The grid layout setting method includes executing a setting window for a grid layout according to user input, displaying a plurality of grid layout setting screens within the setting window, setting a plurality of first grid areas for a first device within a first grid layout setting screen and matching a plurality of group components corresponding to one grid item to each of the plurality of first grid areas, setting a plurality of second grid areas for a second device within a second grid layout setting screen and matching a portion or all of the plurality of group components to each of the plurality of second grid areas and generating grid templates for each multi-device, wherein a responsive Page for the multi-devices is developed corresponding to the grid templates for each multi-device.