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.

.

😎 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

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

<div class="gridOverflow go-3Dfx go-actionIcon">

  
  <a class="go_gridItem href=">
    grid item content - thumbnail image <img>, text </a><p><a class="go_gridItem href=">
    
    
    <span class="go_caption go_caption-full">some caption</span>
  </a>

  
  <a href="someURL" class="go_gridItem go_gridItem-panorama"> grid item content - thumbnail image <img>, text </a></p><p><a href="someURL" class="go_gridItem go_gridItem-panorama"> </a>

  
  <a href="someURL" class="go_gridItem go_gridItem-vertigo"> grid item content - thumbnail image <img>, text </a></p><p><a href="someURL" class="go_gridItem go_gridItem-vertigo"> </a>

  
  <a href="someURL" class="go_gridItem go_gridItem-VIP"> grid item content - thumbnail image <img>, text </a></p><p><a href="someURL" class="go_gridItem go_gridItem-VIP"> </a>

  
  </p><div href="someURL" class="go_gridItem go_gridItem-centered"><p> centered content - typically some text </p></div>
</div>

😎 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:

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

<div class="gridOverflow go-masonry go-zoomFx go-actionIcon">

  
  <a class="go_gridItem href=">
    
    <img src="someURL">
  </a>

  <a class="go_gridItem href=">
    <img src="someURL">
    
    
    <span class="go_caption go_caption-full">some caption</span>
  </a>

  
  
  <div href="someURL" class="go_gridItem go_gridItem-centered"><p> centered content - typically some text </p> </div>
</div>

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