{"id":29829248,"url":"https://github.com/roman-flossler/grid-overflow","last_synced_at":"2025-07-29T08:33:37.516Z","repository":{"id":153230530,"uuid":"628559615","full_name":"Roman-Flossler/Grid-Overflow","owner":"Roman-Flossler","description":"A pure CSS solution for masonry layout and grid layout, where grid items can be given vertigo, panorama or VIP class to overflow into the next cell.","archived":false,"fork":false,"pushed_at":"2024-08-21T20:31:41.000Z","size":2796,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-01T05:20:47.234Z","etag":null,"topics":["css","css-grid","css-grid-layout","css3-animations","effect","grid","layout","masonry","masonry-gallery","masonry-grid","masonry-layout"],"latest_commit_sha":null,"homepage":"https://www.flor.cz/gridOverflow/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Roman-Flossler.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-16T10:33:58.000Z","updated_at":"2025-02-25T18:40:05.000Z","dependencies_parsed_at":null,"dependency_job_id":"cc5e4bdb-c855-40a2-a87f-a38d75448761","html_url":"https://github.com/Roman-Flossler/Grid-Overflow","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Roman-Flossler/Grid-Overflow","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Roman-Flossler%2FGrid-Overflow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Roman-Flossler%2FGrid-Overflow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Roman-Flossler%2FGrid-Overflow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Roman-Flossler%2FGrid-Overflow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Roman-Flossler","download_url":"https://codeload.github.com/Roman-Flossler/Grid-Overflow/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Roman-Flossler%2FGrid-Overflow/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267653369,"owners_count":24122190,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-29T02:00:12.549Z","response_time":2574,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-grid","css-grid-layout","css3-animations","effect","grid","layout","masonry","masonry-gallery","masonry-grid","masonry-layout"],"created_at":"2025-07-29T08:33:33.964Z","updated_at":"2025-07-29T08:33:37.488Z","avatar_url":"https://github.com/Roman-Flossler.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Grid Overflow - responsive CSS grid layout\n\n**A pure CSS solution** for masonry layout and grid layout, where grid items can be given vertigo, pa­no­rama or VIP classes to set their over­flow into the next cell.\n\n**Responsive CSS layout** based on CSS grid + flex with optional animated 3D effect, utility classes and adjustable via CSS variables.\n\nYou can use images of any size, they will be automatically adjusted to fit the grid according to the CSS variables settings.\n\n![Grid Overflow example](https://roman-flossler.github.io/StoryShowGallery/img/gridOverflow.jpg)\n\n.\n\n😎 You can try above example at https://www.flor.cz/gridOverflow\n\nGrid Overflow can be used with any framework, here is the React demo - https://codesandbox.io/p/sandbox/cool-albattani-c7gm6s\n\n# Implementation\n\nLink Grid Overflow CSS into head section of HTML document\n\n```html\n\u003clink rel=\"stylesheet\" href=\"path/to/GridOverflow3D.min.css\" /\u003e\n```\n\nCreate some parent element, its children with content and add neccessary classes:\n\n```html\n\u003c!-- gridOverflow class is required - creates responsive grid from grid's direct children (items) --\u003e\n\u003c!-- go-3Dfx or go-zoomFx class adds to each grid item animated effect on mouse over. You can use them together --\u003e\n\u003c!-- go-actionIcon class adds to top right corner of grid items some symbol, but only if grid item is \u003ca\u003e tag  --\u003e\n\u003cdiv class=\"gridOverflow go-3Dfx go-actionIcon\"\u003e\n\n  \u003c!-- grid item (grid's direct child) must have go_gridItem class. Grid element has square form by default. --\u003e\n  \u003ca class=\"go_gridItem href=\"someURL\"\u003e\n    grid item content - thumbnail image \u003cimg\u003e, text \u003cp\u003e\n    \u003c!-- go_caption class is for creating captions inside grid items --\u003e\n    \u003c!-- go_caption-full creates caption with 100% width of the grid item --\u003e\n    \u003cspan class=\"go_caption go_caption-full\"\u003esome caption\u003c/span\u003e\n  \u003c/a\u003e\n\n  \u003c!-- go_gridItem-panorama class creates a grid item in the form of a horizontal rectangle (2x1 cells) --\u003e\n  \u003ca class=\"go_gridItem go_gridItem-panorama\" href=\"someURL\"\u003e grid item content - thumbnail image \u003cimg\u003e, text \u003cp\u003e \u003c/a\u003e\n\n  \u003c!-- go_gridItem-vertigo class creates a grid item in the form of a vertical rectangle (1x2 cells) --\u003e\n  \u003ca class=\"go_gridItem go_gridItem-vertigo\" href=\"someURL\"\u003e grid item content - thumbnail image \u003cimg\u003e, text \u003cp\u003e \u003c/a\u003e\n\n  \u003c!-- go_gridItem-VIP class creates a grid item in the form of a large square (2x2 cells) --\u003e\n  \u003ca class=\"go_gridItem go_gridItem-VIP\" href=\"someURL\"\u003e grid item content - thumbnail image \u003cimg\u003e, text \u003cp\u003e \u003c/a\u003e\n\n  \u003c!-- go_gridItem-centered centers the content --\u003e\n  \u003cdiv class=\"go_gridItem go_gridItem-centered\" href=\"someURL\"\u003e\u003cp\u003e centered content - typically some text \u003c/p\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n😎 Code example: https://codesandbox.io/s/gallery-thumbnails-in-css-grid-layout-full-screen-lightbox-8u6ybo\n\nGridOverflow element will expand to fill 100% width of its parent element.\n\nGridOverflow class has grid-auto-flow set to **dense**, it means that grid items may appear out of order to fill in holes left by larger items. It happens only if you use panorama, vertigo or VIP class. Without this classes each grid item will have the same size and there will be no problem to keep correct order of items.\n\nBasic parameters of Grid Overflow can be set via **CSS variables**:\n\n```css\n.gridOverflow {\n  --gridGap: 10px;\n  --itemMinWidth: 210px;\n  --itemAspectRatio: 1;\n  --itemRounding: 3px;\n  --linkActionIcon: \"⤢\";\n\n  --masonryItemHeight: 180px;\n}\n```\n\nThe number of columns in the grid is determined by **--itemMinWidth**, but the minimum is two columns.\n\nIf the parent element of the gridOverflow has a width of 700px, the grid will have 3 columns: 3 \\* 210px + 2 \\* 10px for the grid gap (numbers are defined by the CSS variables).\n\nItems will expand to fill the entire width of the parent element.\n\nIf you set --itemMinWidth to 30%, there will be three columns regardless of the grid width. The remaining 10% is for the gap between items.\n\n**--itemAspectRatio** defines the height/width ratio of a grid item. A value of 0.5 creates a horizontal rectangle - the height will be half the width. A value of 1 creates a square shaped item.\n\n# Masonry mode\n\nSimply add the go-masonry class to the parent grid element to enable masonry mode. You can also specify **--masonryItemHeight**.\n\n```html\n\u003c!-- gridOverflow is required - creates the grid  --\u003e\n\u003c!-- go-masonry class turns the grid layout into the masonry mode  --\u003e\n\u003c!-- go-3Dfx or go-zoomFx class adds to each grid item animated effect on mouse over. You can use them together --\u003e\n\u003cdiv class=\"gridOverflow go-masonry go-zoomFx go-actionIcon\"\u003e\n\n  \u003c!-- grid item (grid's direct child) must have go_gridItem class.  --\u003e\n  \u003ca class=\"go_gridItem href=\"someURL\"\u003e\n    \u003c!-- length of the grid item is variable and depends on the image size, height depends on the --masonryItemHeight --\u003e\n    \u003cimg src=\"someURL\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca class=\"go_gridItem href=\"someURL\"\u003e\n    \u003cimg src=\"someURL\" /\u003e\n    \u003c!-- go_caption class is for creating captions inside grid items --\u003e\n    \u003c!-- go_caption-full creates caption with 100% width of the grid item --\u003e\n    \u003cspan class=\"go_caption go_caption-full\"\u003esome caption\u003c/span\u003e\n  \u003c/a\u003e\n\n  \u003c!-- go_gridItem-centered centers the content, its length depends on --itemMinWidth. --\u003e\n  \u003c!-- Also go_gridItem-noImage class can be used for a text content (no centering)  --\u003e\n  \u003cdiv class=\"go_gridItem go_gridItem-centered\" href=\"someURL\"\u003e\u003cp\u003e centered content - typically some text \u003c/p\u003e \u003c/div\u003e\n\u003c/div\u003e\n```\n\n😎 Code example: https://codesandbox.io/s/masonry-css-layout-of-gallery-thumbnails-full-screen-lightbox-wkzsvo\n\nIn masonry mode, the size of the grid items is determined by the aspect ratio of the images, so the Vertigo, Panorama and VIP classes have no effect. As well as --itemAspectRatio.\n\nThe CSS variable **--itemMinWidth** only affects grid items with go_gridItem-centered or go_gridItem-noImage classes. Grid items where the text or mixed content is supposed.\n\nThe minimum number of columns in the masonry mode is one.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froman-flossler%2Fgrid-overflow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Froman-flossler%2Fgrid-overflow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froman-flossler%2Fgrid-overflow/lists"}