Responsive CSS Masonry Grid Layout – Grid Overflow

Category: CSS & CSS3 , Layout | June 27, 2023
Author:Roman-Flossler
Views Total:591 views
Official Page:Go to website
Last Update:June 27, 2023
License:MIT

Preview:

Responsive CSS Masonry Grid Layout – Grid Overflow

Description:

A CSS library for creating responsive Masory- and Mosaic-style grid layouts with optional 3D hover effects.

How to use it:

1. Download and import the GridOverflow3D.css.

<link rel="stylesheet" href="path/to/GridOverflow3D.css" />

2. Create a grid layout using the following CSS classes:

  • gridOverflow: Required
  • go-3Dfx: Enables 3D hover effects
  • go-actionIcon: Add an action icon to the grid items
  • go_gridItem: Selector of grid items
  • go_caption: Selector of captions
  • go_caption-full: Make captions full width
  • go_gridItem-panorama: Horizontal rectangle
  • go_gridItem-vertigo: Vertical rectangle
  • go_gridItem-VIP: Large square
  • go_gridItem-centered: Make the content centered
<div class="gridOverflow go-3Dfx go-actionIcon">
  <a class="go_gridItem href="#">
    Grid Item 1
    <span class="go_caption go_caption-full">
      Caption 1
    </span>
  </a>
  <a class="go_gridItem go_gridItem-panorama" href="#">
    Grid Item 2
    <span class="go_caption go_caption-full">
      Caption 2
    </span>
  </a>
  <a class="go_gridItem go_gridItem-vertigo" href="#">
    Grid Item 3
    <span class="go_caption go_caption-full">
      Caption 3
    </span>
  </a>
  <a class="go_gridItem go_gridItem-VIP" href="#">
    Grid Item 4
    <span class="go_caption go_caption-full">
      Caption 4
    </span>
  </a>
  <div class="go_gridItem go_gridItem-centered" href="#">
    Grid Item 5
    <span class="go_caption go_caption-full">
      Caption 5
    </span>
  </div>
</div>

3. To create a Masonry layout, just add the go-masonry class to the parent container.

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

4. Override the default CSS variables to create your own layout styles.

.gridOverflow {
  --itemMinWidth: 200px;
  --itemAspectRatio: 1;
  --gridGap: 10px;
  --mobileRowItemsCount: 2;
  --linkActionIcon: "⤢";
  --itemRounding: 6px;
  --masonryItemHeight: 180px;
}

Changelog:

v1.2.4 (06/27/2023)

  • zoom effect, info update

v1.2.3 (05/21/2023)

  • no JS workaround nedeed for Apple Safari

v1.2.2 (05/17/2023)

  • bugfix

v1.2.1 (05/10/2023)

  • mobileRowItemsCount doesn’t depend on resolution

You Might Be Interested In:


Leave a Reply