https://github.com/roman-flossler/grid-overflow

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.
https://github.com/roman-flossler/grid-overflow

css css-grid css-grid-layout css3-animations effect grid layout masonry masonry-gallery masonry-grid masonry-layout

Last synced: 11 months ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/roman-flossler/grid-overflow
• Owner: Roman-Flossler
• License: mit
• Created: 2023-04-16T10:33:58.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-08-21T20:31:41.000Z (almost 2 years ago)
• Last Synced: 2025-07-01T05:20:47.234Z (about 1 year ago)
• Topics: css, css-grid, css-grid-layout, css3-animations, effect, grid, layout, masonry, masonry-gallery, masonry-grid, masonry-layout
• Language: HTML
• Homepage: https://www.flor.cz/gridOverflow/
• Size: 2.67 MB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Grid Overflow - responsive CSS grid layout

**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.

**Responsive CSS layout** based on CSS grid + flex with optional animated 3D effect, utility classes and adjustable via CSS variables.

You can use images of any size, they will be automatically adjusted to fit the grid according to the CSS variables settings.

![Grid Overflow example](https://roman-flossler.github.io/StoryShowGallery/img/gridOverflow.jpg)

.

😎 You can try above example at https://www.flor.cz/gridOverflow

Grid Overflow can be used with any framework, here is the React demo - https://codesandbox.io/p/sandbox/cool-albattani-c7gm6s

# Implementation

Link Grid Overflow CSS into head section of HTML document

```html

```

Create some parent element, its children with content and add neccessary classes:

```html



  

  

    grid item content - thumbnail image , text 


    

    

    some caption

  


  

   grid item content - thumbnail image , text 
 


  

   grid item content - thumbnail image , text 
 


  

   grid item content - thumbnail image , text 
 


  

  
 centered content - typically some text 



```


😎 Code example: https://codesandbox.io/s/gallery-thumbnails-in-css-grid-layout-full-screen-lightbox-8u6ybo

GridOverflow element will expand to fill 100% width of its parent element.

GridOverflow 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.

Basic parameters of Grid Overflow can be set via **CSS variables**:

```css

.gridOverflow {

  --gridGap: 10px;

  --itemMinWidth: 210px;

  --itemAspectRatio: 1;

  --itemRounding: 3px;

  --linkActionIcon: "⤢";

  --masonryItemHeight: 180px;

}

```

The number of columns in the grid is determined by **--itemMinWidth**, but the minimum is two columns.

If 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).

Items will expand to fill the entire width of the parent element.

If you set --itemMinWidth to 30%, there will be three columns regardless of the grid width. The remaining 10% is for the gap between items.

**--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.

# Masonry mode

Simply add the go-masonry class to the parent grid element to enable masonry mode. You can also specify **--masonryItemHeight**.

```html



  

  

    

    

  

  

    

    

    

    some caption

  

  

  

  


 centered content - typically some text 
 



```


😎 Code example: https://codesandbox.io/s/masonry-css-layout-of-gallery-thumbnails-full-screen-lightbox-wkzsvo

In 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.

The 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.

The minimum number of columns in the masonry mode is one.