Responsive Cascading Grid Layout Like Masonry Brick Wall | BrickCols.js

grid-layout-brickcols-js

BrickCols.js Cascading grid layout with no absolute positioning. You don’t need to use any JS code to set the stylesheet properties. Blocks are laid in the form of brickwork.

All stylistic properties are only described in CSS, and the JS (jQuery) script is only responsible for sorting blocks.

Must Read: Responsive Masonry Layout with SSR Support for Vue 3 | vue-masonry-wall

How to make use of it:

1. Include the JavaScript file BrickCols.js.

<script src="brickcols.js"></script>

2. The html structure should be like this.

<element_1 class="wrapper_classes">
  <element_2 class="column_class">
    <element_3 class="block_class" data-priority="priority integer">
      content here
    </element_3>
    <element_3 class="block_class" data-priority="1">
      content here
    </element_3>
    <element_3 class="block_class">
      content here
    </element_3>
    …
    <element_3 class="block_class" data-priority="2">
      content here
    </element_3>
  </element_2>
</element1>

3. Configure the grid layout as follows:

BrickCols.layout_optimization('.wrapper_class', '.column_class', '.block_class');

See Demo And Download

Official Website(ms27): Click Here

This superior jQuery/javascript plugin is developed by ms27. For extra Advanced Usage, please go to the official website.