awesome-repositories.com
Blog
MCP
awesome-repositories.com

Discover the best open-source repositories with AI-powered search.

ExploreCurated searchesOpen-source alternativesSelf-hosted softwareBlogSitemap
ProjectAboutHow we rankPressMCP server
LegalPrivacyTerms
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·
callmecavs avatar

callmecavs/bricks.js

0
View on GitHub↗
4,651 stars·193 forks·JavaScript·3 viewscallmecavs.com/bricks.js↗

Bricks.js

bricks.js is a masonry layout engine and responsive grid layout tool used for arranging fixed-width elements into a packed grid system. It functions as a dynamic element packer that calculates the absolute positions of items based on specific size parameters.

The library distinguishes itself through incremental layout integration, utilizing a system that identifies and merges newly added elements into an existing layout without recalculating every item on the page. It also includes a mechanism for tracking browser window dimensions to trigger layout repacks when screen sizes match predefined breakpoints.

The project covers fixed-width grid management and responsive web design, utilizing a coordinate-based system to ensure consistent alignment and prevent overlapping within the masonry flow.

Features

  • Masonry Layouts - Provides a JavaScript engine for arranging fixed-width elements into a packed masonry grid system.
  • Incremental Layout Updates - Implements a system that merges new elements into an existing layout without recalculating every item.
  • Grid Index Coordinate Mappers - Calculates absolute pixel positions by mapping discrete grid indices to fill available gaps.
  • Dynamic Element Packers - Calculates the positions of new elements and merges them into an existing masonry layout.

AI search

Explore more awesome repositories

Describe what you need in plain English — the AI ranks thousands of curated open-source projects by relevance.

Start searching with AI
  • Masonry Grid Management - Arranges items with predefined widths into an optimized and visually balanced masonry structure.
  • Spatial Grid Mapping - Maps element dimensions to a discrete grid to ensure consistent alignment and prevent overlapping.
  • Dynamic Grid Layouts - Provides a dynamic grid layout that integrates and packs new elements without a full page recalculation.
  • Incremental Layout Systems - Identifies and merges newly added elements into the layout without repackaging the entire set.
  • Resize Triggered Repacking - Tracks browser window resizing and triggers a layout repack when dimensions match predefined breakpoints.
  • Grid Layout Resize Event Systems - Triggers coordinate recalculations for grid layouts when browser resize events match specific breakpoints.
  • Responsive Grid Layouts - Automatically reorganizes the grid layout to fit different screen dimensions during window resizing.

    • Star history

    Star history chart for callmecavs/bricks.jsStar history chart for callmecavs/bricks.js

    Open-source alternatives to Bricks.js

    Similar open-source projects, ranked by how many features they share with Bricks.js.
    • metafizzy/packerymetafizzy avatar

      metafizzy/packery

      4,317View on GitHub↗

      Packery is a JavaScript bin-packing grid layout engine and DOM element positioning library. It arranges elements of varying sizes into a gapless, compact grid by calculating and applying absolute coordinates to HTML elements to prevent overlapping. The library enables the creation of draggable grid interfaces, allowing users to rearrange elements via drag-and-drop while the system automatically reflows the remaining items. It maintains stable, responsive layouts across different screen dimensions by using a percentage-based positioning system and responding to window resize events. The tool

      JavaScript
      View on GitHub↗4,317
    • chiahsien/chtcollectionviewwaterfalllayoutchiahsien avatar

      chiahsien/CHTCollectionViewWaterfallLayout

      4,613View on GitHub↗

      CHTCollectionViewWaterfallLayout is a custom layout for iOS collection views designed to organize items of varying heights into a masonry-style grid. It enables the display of dynamic content in multiple columns to optimize screen space and visual flow. The layout allows for specific configuration of column counts and item population directions, including left-to-right, right-to-left, and shortest-column-first rendering patterns. This approach minimizes vertical gaps by placing items into the column with the lowest current height. The system also manages section-level accessories, integratin

      Objective-C
      View on GitHub↗4,613
    • valqelyan/svelte-gridvalqelyan avatar

      valqelyan/svelte-grid

      1,002View on GitHub↗

      Svelte Grid is a responsive layout library designed for building interactive, draggable, and resizable dashboard interfaces within Svelte applications. It provides a coordinate-based system that allows users to manipulate the position and dimensions of UI components directly on the screen, ensuring that content blocks remain organized within a structured grid. The library distinguishes itself through a constraint-driven engine that enforces minimum and maximum size boundaries during user interactions, preventing overlapping elements and maintaining layout integrity. It includes built-in suppo

      Svelteadmin-dashboarddragdraggable
      View on GitHub↗1,002
    • metafizzy/isotopeM

      metafizzy/isotope

      11,102View on GitHub↗

      Isotope is a JavaScript grid layout library used to create filterable and sortable grids with automatic element positioning in the browser. It functions as a layout engine that calculates absolute coordinates for elements to maintain a dense grid regardless of individual item dimensions. The library features a masonry layout engine that arranges items of varying heights into a compact grid to eliminate vertical gaps. It includes a coordinate-based layout animator for smooth transitions during layout shifts and a CSS selector filtering tool to show or hide elements without reloading the page.

      HTML
      View on GitHub↗11,102
    See all 30 alternatives to Bricks.js→

    Frequently asked questions

    What does callmecavs/bricks.js do?

    bricks.js is a masonry layout engine and responsive grid layout tool used for arranging fixed-width elements into a packed grid system. It functions as a dynamic element packer that calculates the absolute positions of items based on specific size parameters.

    What are the main features of callmecavs/bricks.js?

    The main features of callmecavs/bricks.js are: Masonry Layouts, Incremental Layout Updates, Grid Index Coordinate Mappers, Dynamic Element Packers, Masonry Grid Management, Spatial Grid Mapping, Dynamic Grid Layouts, Incremental Layout Systems.

    What are some open-source alternatives to callmecavs/bricks.js?

    Open-source alternatives to callmecavs/bricks.js include: metafizzy/packery — Packery is a JavaScript bin-packing grid layout engine and DOM element positioning library. It arranges elements of… chiahsien/chtcollectionviewwaterfalllayout — CHTCollectionViewWaterfallLayout is a custom layout for iOS collection views designed to organize items of varying… valqelyan/svelte-grid — Svelte Grid is a responsive layout library designed for building interactive, draggable, and resizable dashboard… metafizzy/isotope — Isotope is a JavaScript grid layout library used to create filterable and sortable grids with automatic element… etsy/androidstaggeredgrid — The AndroidStaggeredGrid library provides a multi-column, masonry-style grid component for Android applications. It… flipkart/recyclerlistview — Recyclerlistview is a cross-platform virtualized list component for React Native and web. It functions as a…