{"version":"1.0","type":"rich","title":"CSS Grid work","description":"This example demonstrates a CSS Grid layout using four colored panels arranged in an asymmetric pattern within a full-viewport section. The grid defines named areas—left, center, centerone, and right—to position the crimson divs across rows and columns with gaps. It uses pure CSS grid-template-areas and grid-template-rows to control the layout, while the HTML page includes no JavaScript or external frameworks. The visualization highlights how grid-area assignments and fractional row units (1fr) create a responsive, non-uniform structure.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/dca91d01aca9498f8ff5dbfbd07eb435?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}