Easy Responsive Masonry Grid Library – Stackgrid

Category: Javascript , Layout | January 12, 2023
Author:wolffe
Views Total:403 views
Official Page:Go to website
Last Update:January 12, 2023
License:MIT

Preview:

Easy Responsive Masonry Grid Library – Stackgrid

Description:

Stackgrid is a lightweight JavaScript library that makes it easier to create responsive, Masonry-style grid layouts for blog post lists, portfolio websites, and image galleries.

Unlike the traditional grid layout, it allows for elements of different sizes to be placed next to each other, creating a more natural and dynamic flow of content.

How to use it:

1. Load the stylesheet stackgrid.css and JavaScript stackgrid.js in the document.

<link rel="stylesheet" href="stackgrid.css" />
<script src="stackgrid.js"></script>

2. Add your content (images, videos, or text) to the Masonry grid.

  • max-width: Set the column size to “2” when the screen size is small than 640px
  • min-width: Set the column size to “1” when the screen size is large than 320px but small than 640px
  • gutter: The space between cards
<div class="stack-container" max-width="640" min-width="320" gutter="5">
  <div class="stack-card">
    <div class="header">
      <div class="title">Card Title</div>
    </div>
    <div class="content">Card image description</div>
    <img src="1.jpg">
  </div>
  <div class="stack-card">
    <div class="header">
      <div class="title">Card Title</div>
    </div>
    <div class="content">Card image description</div>
    <img src="2.jpg">
  </div>
  <div class="stack-card">
    <div class="header">
      <div class="title">Card Title</div>
    </div>
    <div class="content">Card image description</div>
    <img src="3.jpg">
  </div>
  ...
</div>

You Might Be Interested In:


Leave a Reply